Modifying Tooltip Coordinates with the jQuery Tooltip Plug-in
If you’re a web designer who wants to learn how to take advantage of the features packaged with the jQuery Tooltip plug-in to enhance the behavior of your web pages links, then this series of comprehensive articles might be what you’re looking for. In this part, you'll learn how to use the handy “top” and “left” parameters that come with the plug-in to modify the default coordinates at which tooltips are displayed next to the targeted links.
Modifying Tooltip Coordinates with the jQuery Tooltip Plug-in - Review: the fade argument (Page 2 of 4 )
Before I start explaining how to assign different top and left coordinates to tooltips on a web page, I'm going to reintroduce the examples developed in the preceding article. They illustrated how to create a smooth fade out effect on the tooltips in question.
Having said that, here's the source code corresponding to the examples. Take a quick look at them, please:
(example on using the fade argument with a value of 250 milliseconds)
<!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, track mouse position and fade it out
$(document).ready(function(){
$("a").tooltip({
delay: 800,
fade: 500
});
});
</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>
From the above code samples, it's clear to see how simple it is to apply a smooth transition when the tooltips are hidden from display. In the first case, the value assigned to the pertinent "fade" argument was 250 milliseconds, while in the second example, the fade out effect will have a duration of 500 milliseconds. Definitely, understanding how the "fade" parameter does its thing isn't rocket science, is it?
Well, now that you hopefully recalled how the previous hands-on examples do their business, I'm going to explain how to modify the default top and left coordinates of tooltips to control their positions more accurately within the web document.
However, to learn the full details of how this customization process will be accomplished, you'll have to read the following section.
JavaScript 
Applying a Fade Out Effect with the jQuery Tooltip Plug-in
