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">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Tooltip example</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, 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>
(example on using the bodyHandler argument to display text within links)
<!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</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, 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.
Next: Using the bodyHandler parameter to create image-based tooltips >>
More JavaScript Articles
More By Alejandro Gervasio
