Examples of Using the Bubbling Technique for ToolTips

Include the corresponding behavior for Tooltips and a bunch of elements in your page will show a nice dynamic tooltip:

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 XHTML code.

This implementation has only an instance of the tooltip object for the document, decreasing the memory usage and rendering in realtime with each mouseover event.

Facts:

All the elements with title and className equal to "yui-tip" will show a tooltip on rollover event.

Anchor Element:

Anchor: Hover over me to see a Tooltip without URL!

Span Element:

SPAN: Hover over me to see a Tooltip!

IMG Element:

YUI Button:

YUI

TextArea Form Element:

write your note here...

Inputs Form Element:

  Username:
  Password:

Extending the features:

Also you can redefine the "finder" method to determine if an element has a tooltip:

YAHOO.widget.TooltipManager.finder = function ( el ) {
  // this method will be executed every time the mouse go over a new element...
  // el - represent the DOM reference..
  return YAHOO.Bubbling.getOwnerByClassName( el, 'yui-my-tip' );
};