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.