The jQuery Tooltip Plug-in

Certainly, one of the most relevant features of jQuery is its ability to add behavior to certain elements of a web page in a truly unobtrusive way, and its Tooltip plug-in is no exception. When it's necessary to display a number of tooltips next to each of the links that you saw in the previous segment, this process only requires loading first the pertinent JavaScript files, and then instantiating a brand new method, called (not surprisingly) "tooltip," which must be invoked with the appropriate input parameters.

Adding basic a tooltip to the sample links can be done with the following JavaScript snippets:

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript" src="jquery.dimensions.js"></script>

<script type="text/javascript" src="jquery.tooltip.js"></script>

<script type="text/javascript">

// assign tooltip to links after web page has been loaded

$(document).ready(function(){

$("a").tooltip();

});

</script>

As shown by the above JavaScript code, only three files are required to get the tooltip plug-in working as expected. The first one is the jQuery library. Next, there is a "dimensions.js" dependency, which assigns the proper widths and heights to the tooltip. Finally, we have the tooltip source file itself. Until now, there's nothing unusual going on, right?

At the end of the script, the "tooltip()" method is assigned to all of the "<a>" elements included in the web page (the link bar for this specific example), after the whole web page has been loaded.

From the previous example, it's clear to see how simple and quick it is to add a few tooltips to links within a web document using an unobtrusive approach. However, the example in question would be rather incomplete if I didn't complement it with an image that shows how tooltips are displayed on the browser, so here it is:

Here you have it. Now each time the mouse is placed over each link, a label will be displayed next to it, and it'll show additional information, such the text and the value assigned to the link's "href" attribute. Of course, this is merely a basic demonstration. It's possible to customize the appearance and behavior of tooltips.

For instance, say that you want a tooltip to be displayed after a specified number of milliseconds. Well, that's perfectly possible to accomplish bu passing in a "delay" argument into the "tooltip()" method. But I'm getting ahead of myself; this topic will be treated more deeply in the section to come.

To read that section, simply click on the link shown below.