Bubbling Library > Examples

Bubbling / Tooltips (YAHOO.widget.TooltipManager): Tutorials


ToolTips for every link in the page

Benefit from the bubbling technique, include the corresponding behavior for Tooltips and all the links in your page will have a nice dynamic tooltip attach it, including the link created on the fly.

ToolTips for different type of elements in the page using the className

Include the corresponding behavior for Tooltips and a bunch of elements in your page will show a nice dynamic tooltip. All the elements with title and className equal to "yui-tip" will show a tooltip on rollover event. Also, learn how to extend the method "finder" to apply the dynamic tooltip to other kind of elements.

Dynamic ToolTips for diferent kind of elements (YUI Buttons, images, links)

Dynamic ToolTips - This is a customization of the previous example, attaching tooltips to dynamic and static elements based on the title of the anchor.

ToolTips without the link information (new)

This is a customization of the previous example, redefining the method "onCompile" to display whatever we want into the tooltip's overlay.

Parsing the tooltip's content and applying a pseudo code (new)

Creating a pseudo code to apply styles to the title.

Help Hint with images and links inside (flickr images and thumbnails)

This is a tooltip customization to display thumbnail images on mouse over based on the HREF of the anchor. This implementation is based on the technique described by Chris Heilmann.

Animated and Dragable tooltips with close button and persisten (keeping one instance visible)

You can use this control to display information related with the target element, and this information can be an common xhtml full text, allow you to use this control to keep this information visible until the user close the panel or rollover another element with tooltip attached. In this case the panel will be displayed using an animation effect (FADE In/Out).

AJAX ToolTips: Get the tooltip's content remotely

If you're using a lot of dynamic links, and every link has a custom text for the tooltip element, you can use a simple ajax application for fetch the content on the fly.