Tracking Mouse Movements with the jQuery Tooltip Plug-in

Introduction

As you may have noticed recently, JavaScript-based tooltips are a very common feature implemented by many web sites these days. Only to cite an illustrative example, if you look at Yahoo's front page, you'll see that some of its section links have been enhanced by add a tooltip that displays brief information about a particular topic.

Fortunately, there's no need to be a big web player to add tooltips to HTML pages. There are many plug-ins available on the web that permit you to incorporate this characteristic in a truly painless fashion. Speaking more specifically, the jQuery library has a neat add-on, not surprisingly called "Tooltip," that allows you to assign descriptive pop-up notes to links within a web page. Best of all, it can be easily customized to suit the requirements of a specific web site.

Of course, if you read the first chapter of this series, then you'll have a clear idea of how to add tooltips to a group of bulleted links by using the jQuery Tooltip plug-in. In that particular tutorial I developed a pair of hands-on examples aimed at demonstrating how to work at a very basic level with this JavaScript application.

In the first example, the default tooltip was tied to the set of links, while the second case was a little bit more complex; it illustrated how to use a "delay" parameter to make the tooltip appear on screen after a specified number of milliseconds.

Obviously, the code samples built so far are quite simplistic, but as I mentioned a few moments ago, the Tooltip plug-in offers a good level of customization, which allows you to improve its appearance and behavior. So, in this second part of the series, I'm going to show you how to enhance the default tooltip that you learned in the previous article by giving it the ability to follow mouse movements when it is displayed.

This feature will be added via another input parameter called "track." Keep reading to see how to use it in a real-world example.