JAVASCRIPT

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.

Author Info:

By: Alejandro Gervasio

Poor Best

Rating:

/ 1

November 03, 2009

TABLE OF CONTENTS:

Certainly, one common usage of the “bodyHandler” argument is for creating image-based tooltips. Basically, this process permits you to display enlarged versions of thumbnail graphics by means of a simple callback function. To demonstrate this concept more extensively, I’m going to build a primitive JavaScript application that will show the full-sized version of a thumbnail, using the following sample image:

Now that there’s a graphic to work with, here’s the code sample that creates the image-based tooltip, based on the functionality given by the “bodyHandler” option:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>Tooltip example using the bodyHandler option</title>

// assign tooltip to links after web page has been loaded

// delay tooltip display 400 ms, using bodyHandler option

$(document).ready(function(){

$("img").tooltip({

delay: 100,

track: true,

fade: 250,

bodyHandler: function() {

return $("<img />").attr("src", this.src);

}

});

</script>

</head>

<body>

<div>

</div>

</body>

</html>

As you can see above, the dimensions of the sample image shown previously have been purposely reduced within the structural markup, while the callback function defined for the “bodyHandler” argument returns its full-sized version, thus creating a simple preview mechanism for a single thumbnail graphic. In addition, the following screen capture shows more clearly the output generated by this particular example:

Not too bad, huh? Considering that building this application requires only defining a simple callback function, the result is more than acceptable. In addition, it’s possible to create variations of the application by removing and adding some extra parameters passed to the “tooltip()” method. In the above example, it’s clear to see that the mouse tracking feature has been enabled, but it can be easily disabled while keeping the others active.

So, as a conclusion to this tutorial, I’m going to create a final hands-on example that will show how to build a slightly different version of the previous web application, where mouse tracking will be inactive. As usual, this process will be discussed in detail in the section to come, so click on the link below and read the following segment.

Next: Building an image tooltip with mouse tracking disabled >>