Using the jQuery Tooltip Plug-in`s bodyHandler Argument
In this fifth installment of a seven-part series on the jQuery Tooltip plug-in, I discuss the use of the “bodyHandler” argument. It can be really useful for injecting HTML code into tooltips, thus altering their default visual appearance and behavior.
Using the jQuery Tooltip Plug-in`s bodyHandler Argument - Review: the top and left parameters (Page 2 of 4 )
Since in the introduction I mentioned that the Tooltip plug-in had the ability to control the coordinates at which tooltips were shown on the browser via the "top" and "left" arguments, it'd be helpful to spend a minute or two reviewing the code samples that demonstrated this process. With that idea in mind, below I listed these examples, so you can quickly recall quickly how they looked. Here they are:
(example on using the top and left parameters to alter default positions of tooltips)
<!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, do not track mouse position, fade it and assign left-top coordinates
$(document).ready(function(){
$("a").tooltip({
delay: 400,
fade: 500,
top: -10,
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>
As shown above, modifying the default coordinates used by the plug-in for displaying them on screen is reduced to assigning the proper values in pixels to the respective "top" and "left" arguments and nothing else. In the first case, the tooltips not only will be shown at a different position, but they will follow any mouse movements, while in the second example, the mouse tracking feature has been disabled; the "track" argument has been removed.
At this point, you're hopefully pretty familiar with playing with the "top" and "left" parameters, right? So I'm going to show how to use yet another argument given by the Tooltip plug-in, called "bodyHandler." It will come in handy for adding HTML code within the tooltips.
To see how this new argument will be used in a concrete example, click on the link below and read the following section.
JavaScript 
Building Image-Based Tooltips with the jQuery Tooltip Plug-in
