Building Image-Based Tooltips with the jQuery Tooltip Plug-in
In this sixth part of a seven-part series on using the jQuery Tooltip plug-in, I demonstrate how the bodyHandler argument can be used to display image-based tooltips. I also show how to customize their behavior by adding and removing options within the “tooltip()” method.
Building Image-Based Tooltips with the jQuery Tooltip Plug-in - Reintroducing the bodyHandler argument (Page 2 of 4 )
Before I explain how to use the “bodyHandler” argument to create full-sized versions of thumbnail images, I'm going to review the examples developed in the previous article, which illustrated a simple usage of this parameter.
Having said that, here is the complete source code corresponding to the examples:
(basic example on using the bodyHandler argument)
<!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 $(this).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 you’ll recall, the first of the examples shown above demonstrates how to employ the “bodyHandler” parameter for displaying the HTML code included in all of the <li> elements of the sample web page. Moving forward, the last case shows a more useful implementation of this argument; it utilizes “bodyHandler” this time for creating some tooltips that display all the text included in the targeted hyperlinks.
Hopefully you now have a clearer idea of how to utilize this handy argument for injecting HTML directly into tooltips via a simple callback function. However, as I expressed in the introduction, it’s possible to use the “bodyHandler” argument in a more useful fashion, for instance to display full-sized versions of thumbnails.
That’s exactly the subject that will be discussed in the following section. Therefore, to learn more about it, click on the link that appears below and continue reading.
JavaScript 
More Uses for the jQuery Tooltip Plug-in`s bodyHandler Option
