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 - Customizing the positions of tooltips (Page 3 of 4 )
Not surprisingly, modifying the top and left coordinates of tooltips is only a question of calling the "tooltip()" method that you saw before with a couple of additional input arguments, named "top" and "left" respectively. The best way to understand how to use these parameters in a concrete case, of course, is by means of an illustrative example.
Below I included an entirely new code sample, which shows how to work with the "top" and "left" arguments. Check it out:
<!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 400 ms, track mouse position, fade it and assign left-top coordinates
$(document).ready(function(){
$("a").tooltip({
delay: 400,
track: true,
fade: 250,
top: -25,
left: 40
});
});
</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>
See how easy it is to modify the top and left coordinates at which tooltips are displayed on screen? I bet you do. In this particular case, I assigned a negative shift for the top position, while the left coordinate has been assigned a value of 40px. This process will make the tooltips appear in a different place with respect to the targeted links, thus customizing their behavior even further.
Apart from studying the previous example, you may want to look at the image below. It shows how a tooltip is displayed on the browser after modifying its respective top and left coordinates. Here's the image:
At this point you'll have to agree with me that assigning different coordinates to tooltips is indeed a no-brainer process that can be tackled with minor hassles. Nonetheless, I'd like to finish this tutorial by providing you with another code sample that further shows the correct usage of the "top" and "left" parameters.
As you might have already guessed, this example will be developed in the last section of this article. So please click on the link shown below and keep reading.
JavaScript 
Applying a Fade Out Effect with the jQuery Tooltip Plug-in
