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 - Adding HTML markup to tooltips with the bodyHandler input argument (Page 3 of 4 )
As I anticipated in the beginning of this article, the Tooltip jQuery plug-in offers a "bodyHandler" argument that permits you to include HTML code directly within tooltips. This means you can completely customize the information that they will display about a particular web page link.
To clarify how this argument functions, I coded a brand new example that will show within the tooltips, the markup contained within all of the <li> elements included into the web document. Here's how this example was created:
<!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, using bodyHandler option
$(document).ready(function(){
$("a").tooltip({
delay: 0,
track: true,
bodyHandler: function() {
return $("li").html();
}
});
});
</script>
</head>
<body>
<div>
<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>
</div>
</body>
</html>
As depicted above, the "bodyHandler" parameter accepts a simple callback function, which is used for displaying in the tooltips the HTML code wrapped for each <li> element. Of course, this process is rather useless, but it serves to demonstrate the actual functionality of this argument.
Apart from paying attention to the previous example, you may also want to look at the following screen capture. It shows the output generated in this case by the "bodyHandler" parameter:
Without a doubt, displaying the markup included within all of the <li> tags that comprise the link bar shown before isn't a very handy task, right? However, bear with me a little longer and let me show you a slightly more useful example of the "bodyHandler" argument. What about creating a bunch of tooltips that are capable of displaying their own embedded text? Well, that sounds much more interesting!
That will be what the next example of this tutorial will do. Therefore, to learn how this will be done, click on the link below and read the next few lines. We're almost finished!
JavaScript 
Building Image-Based Tooltips with the jQuery Tooltip Plug-in
