Tracking Mouse Movements with the jQuery Tooltip Plug-in
In this second installment of a seven-part series focused on the jQuery Tooltip plug-in, I demonstrate how to customize its behavior and appearance. First I discuss the use of the “track” parameter, which makes tooltips follow mouse movements, and then I show how to work with the “showURL” argument to prevent “href” attributes from being displayed within the tooltip.
Tracking Mouse Movements with the jQuery Tooltip Plug-in - Tracking mouse movements (Page 3 of 4 )
Providing tooltips with the capacity to follow mouse movements is only a matter of calling the "tooltip()" JavaScript method with an additional input argument named "track." This can be assigned a Boolean value, where TRUE means that the tooltip will track the mouse's pointer, and logically FALSE won't. It's that simple.
However, the best way to understand how this parameter affects the behavior of a tooltip is by means of a concrete example. Below I included a brand new code sample that shows how the "track" argument works. Have a look at it, please:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
// assign tooltip to links after web page has been loaded
// delay tooltip display 800 ms and track mouse position
$(document).ready(function(){
$("a").tooltip({
delay: 400,
track: true
});
});
</script>
</head>
<body>
<ul>
<li><a href="http://jquery.com" title="Sample Link 1">Sample Link 1</a></li>
<li><a href="http://jquery.com" title="Sample Link 2">Sample Link 2</a></li>
<li><a href="http://jquery.com" title="Sample Link 3">Sample Link 3</a></li>
<li><a href="http://jquery.com" title="Sample Link 4">Sample Link 4</a></li>
<li><a href="http://jquery.com" title="Sample Link 5">Sample Link 5</a></li>
<li><a href="http://jquery.com" title="Sample Link 6">Sample Link 6</a></li>
</ul>
</body>
</html>
Here you have it. By assigning a TRUE value to the "track" argument, all of the tooltips that have been attached to the previous web page links will follow mouse movements, thus creating a classic "tail" effect. But, naturally you don't have to take my word for it. Try the above example on your own browser and see how the tooltips will stick to the mouse position. In addition, you may have noticed that I used this tracking feature along with the already familiar "delay" parameter, meaning that tooltips will be displayed on screen with a delay of 400 milliseconds.
Now that you hopefully understand how to utilize the "track" argument with the Tooltip jQuery plug-in, it's time to see a slight variation of the previous example. This time I'm going to show you how to create tooltips that follow mouse movement, but without displaying the value assigned to the web page links.
This topic will be discussed in detail in the following segment. Therefore, to learn more about it, please click on the link below and read the next few lines.
JavaScript 
Applying a Fade Out Effect with the jQuery Tooltip Plug-in
