Example 1: Basic Tooltip

The first example demonstrates a very fundamental and basic use of the tooltip library. In this example we see how closely a DOM Tooltip can match the look and functionality of a native browser tooltip.* There are two links below. The link on the left uses the title attribute, which is interpreted by the browser as a tooltip command. The link on the right uses the DOM Tooltip library to generate the same tooltip.** The tooltip will even disappear after a 5 second delay, approximately the same delay the browser uses for its tooltips.***

Notice also that it is not necessary to specify the width of the tooltip. The tooltip will expand to the available space if no width or maxWidth is specified, as in this example.

Native Tooltip vs. DOM Tooltip

* To match the exact style of the tooltip is very difficult because different browsers render the native tooltip differently. If you are using Mozilla under Linux, it is almost impossible to match since mozilla is picking up the default GTK theme.

** If you are using Opera 7, you may have a native tooltip popping up on the right link. It is necessary to navigate to your preferences and turn off all tooltips except for those responding to elements with a 'title' attribute to avoid this from happening.

*** In Opera 7, the native tooltip says until you mouseout.

Note: The benefit which the DOM Tooltip has over the native tooltip is developer control. Through the settings, you can modify how long before it shows up, the colors used and a host of other options. Native tooltips are hard to rely on. Sometimes they just don't show up, in different browsers they have different colors and, if you hold your mouse still long enough, they eventually disappear while the mouse is still over the link (which can be disabled in a DOM Tooltip).

«Index
Example 2»