YUI Widget: Tooltip Manager - Introduction


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 {
.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.

Comment by Alex Goodwin - February 16, 2009

Re: Tooltip Placement in Bottom Right Corner


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.

Comment by Caridy Patino - February 16, 2009

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?

Comment by Marc - August 21, 2009

height missing

BTW, height is missing in the Panel config in tooltips.js (2.1)

Comment by Marc - August 21, 2009

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

Comment by Marc - August 22, 2009

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.

Comment by Chris - November 11, 2009
Bubbling for YUI 3.x

Dispatcher (gallery-dispatcher)
The Dispatcher satisfies a very common need of developers using the YUI library: dynamic execution of Ajax response content. (new)

Node Accordion (gallery-node-accordion)
The Accordion Node Plugin makes it easy to transform existing markup into an accordion element with expandable and collapsible elements. Elements are easy to customize, and only require a small set of dependencies. (new)

Event Binder (gallery-event-binder)
Binding user actions until a particular YUI instance become ready, and the listeners defined before flushing those events through a queue. This will help to catch some early user interactions due the on-demand nature of YUI 3. (new)

Preload (gallery-preload)
Port of Stoyan Stefanov's JavaScript preload() function. It also has built-in support for Timer Idle to preload files only when the user is idle to avoid any overhead during the initial loading process. (new)

Parent Window Utility (gallery-parent-window)
This utility provides a set of functionalities to interact with the parent window. (new)

- See more modules by Caridy.

Bubbling Library is free open source software under the BSD License

(c) 2006 - 2010 Caridy Patino. All Rights Reserved.

This is one of my side projects, if you need something, just ask!