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">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Tooltip example using the top and left arguments</title>
<link rel="stylesheet" type="text/css" href="jquery.tooltip.css" />
<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
// 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.
Next: A final example with the top and left parameters >>
More JavaScript Articles
More By Alejandro Gervasio
