The most common technique for apply tooltips to the complete document is the use of "getElementByTagName", processing each tag and creating one instance of the ToolTips object attached to each tag. This pre-processing can freeze your browser, and create memory leaks when you are using dynamic areas. With the bubbling technique we can guarantee the success without worry about dynamic areas. Also we don´t need to refer a link directly using the tabName or an unique ID to create the corresponding tooltip object, decreasing the count of links with ID included inside the XTML code.
Besides, the implementation using the bubble RollOver only has an instance of the object of the tooltip for all the document, decreasing the memory use and generating each tooltip in real time through mouseover's event on any anchor.
We must include a few styles and scripts that are required to configure the tooltip's bubble. The initialization's example:
<!-- YUI Basement Style -->
<link rel="stylesheet" type="text/css" href='/yui/build/container/assets/container.css'/>
<!-- YUI scripts -->
<script type="text/javascript" src="/yui/build/yahoo/yahoo-min.js"></script>
<script type="text/javascript" src="/yui/build/event/event-min.js" ></script>
<script type="text/javascript" src="/yui/build/dom/dom-min.js" ></script>
<script type="text/javascript" src="/yui/build/container/container-min.js"></script>
<!-- YUI-CMS scripts -->
<script type="text/javascript" src='/yui-cms/build/bubbling/bubbling.js'></script>
<script type="text/javascript" src='/yui-cms/build/tooltips/tooltips.js'></script>
You can download this behavior, that include an singleton global object that will management this behavior, this object called "TooltipManager" ( YAHOO.widget.TooltipManager ) implement a few necessary optimizations for this behavior's good performance. Only include this behavior after the bubbling initialization and you will have all the tooltip's functionality in your page:
<script type="text/javascript" src='/yui-cms/build/tooltips/tooltips.js'></script>
Besides, we'll able to modify visually the style of the tooltipses through a simple code in CSS:
.yui-cms-tt .yui-panel {
text-align: left;
}
.yui-panel-container.yui-cms-tt.shadow .underlay {
top: 2px;
bottom: -2px;
right: -2px;
left: -2px;
padding-left: 4px;
}
.yui-cms-tt .yui-panel, .yui-cms-tt .yui-panel .bd {
color:#333;
background-color:#FDFFB4;
border-color:#FCC90D;
}
.yui-cms-tt .yui-panel .hd {
visible: hidden;
display: none;
}
You can see an example of this behavior through this link, this behavior includes several optimization techniques.
This implementation has only an instance of the tooltip object for the document, decreasing the memory usage and rendering in realtime each mouseover event.
Tooltip Placement in Bottom Right Corner
I am finding the entire library quite useful, but I am experiencing a small problem with the tooltip manager.
When a tooltip is initiated by over on an item in the extreme lower-right of the viewable page. The tooltip often gets placed under the cursor, blocking the hover of the original element, and causing the tooltip to disappear.
Re: Tooltip Placement in Bottom Right Corner
@Alex:
This issue is an known issue, and you can implement your own
workaround. But anyway, we will try to address this issue in the
upcoming version.
Here is the workaround:
// customizing the tooltips compilation routine
YAHOO.widget.TooltipManager.onCompile = function ( el, o ) {
return true; // false to prevent the tooltip render process
};
You can redefine that method, analyzing the position of the element
(el), and the viewport size, and depending on that, you can prevent
the tooltip to appear in that position.
close onmouseout
I have an issue here, when I use a tooltip that contains custom content such as images etc, desirable tooltip behaviour (as I see it) is not available: when close is true. mouseout of the tooltip or link does not lead to tooltip hide. When close is false. mouseover tooltip does not lead to tooltip stay
I think the behaviour should be mouse over tooltip content leads to tooltip stay and mouseout to tooltip hide, whether you have close = true or false. The close is true should just be a convenience button for users who don't understand the behaviour. How can I have a tooltip stay on mouseover content and have it hide on mouseout?
height missing
BTW, height is missing in the Panel config in tooltips.js (2.1)
Works but
On my system the finder method fires on all links on the page. What's worse, it also renders a tooltip (undefined) for all those links.
Works properly for the link that includes the required tooltip class
Fires on all links
I'm experiencing the same issue as Marc. It's firing on all links, not just the links with the class assigned.