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:

As I said in the previous section, it’s extremely easy to create several variations of the sample tootips application that you learned before. For instance, say that it’s necessary to display an image-based tooltip that won’t follow mouse movement. To do this, the “tooltip()” method must be called without the pertinent “track” options, as shown by the following code sample:

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

<head>

<title>Tooltip Example</title>

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

// delay tooltip display 200 ms, using bodyHandler option and fade option

$(document).ready(function(){

$("img").tooltip({

delay: 200,

fade: 250,

bodyHandler: function() {

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

}

});

</script>

</head>

<body>

<div>

</div>

</body>

</html>

There you have it. Now, if you take some time to try out the above example on your own browser (assuming that all of the JavaScript dependencies have been properly installed on your computer, naturally), you’ll see that the full-sized version of the thumbnail won’t stick to the mouse pointer. Of course, this is merely an introductory demonstration of how to create a simple image previewing mechanism for web pages, but all of the code samples developed in this tutorial should provide you with the right pointers to use the Tooltip jQuery plug-in in a more complex fashion.

Final thoughts

In this sixth chapter of the series, I demonstrated how useful the “bodyHandler” argument can be for displaying image-based tooltips. I also indicated that there exists the possibility to customize their behavior by adding and removing options within the “tooltip()” method that you saw before, something that definitively contributes to making tooltips more flexible and suitable for use with a huge range of web applications, including yours naturally.

And speaking of tooltip flexibility, the last installment of this series will show you how to create a few interesting variations of the sample application developed earlier, so you can see more clearly how to simultaneously tweak most of the plug-in's parameters.

Now that you’re aware of the topics that will be covered in the final installment, you can’t miss it!

DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.