JAVASCRIPT

More Uses for the jQuery Tooltip Plug-in`s bodyHandler Option

Welcome to the final installment of a series on the jQuery Tooltip plug-in. In seven approachable tutorials, this series shows you how to use this powerful JavaScript application to create all sorts of eye-popping tooltips for your web page links. This will make them much more accessible and usable to your potential visitors.

Author Info:

By: Alejandro Gervasio

Poor Best

Rating:

/ 1

November 04, 2009

TABLE OF CONTENTS:

I’d like to end this last article of the series by showing you how to build yet another tooltip application that displays the full-sized version of the sample image that you saw before, but in this case the tooltip won’t fade out smoothly. Indeed, the “fade” option won’t be passed to the corresponding “tooltip()” method.

That being said, please examine the source code of this last hands-on example, which looks like this:

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

<head>

<title>Tooltip Example 1</title>

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

// tooltip delay 800 ms, use top and left coordinates with fade disabled

$(document).ready(function(){

$("img").tooltip({

delay: 800,

track: true,

top: 10,

left: 40,

bodyHandler: function() {

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

}

});

</script>

</head>

<body>

</body>

</html>

Undoubtedly, the above sample tooltip application looks very similar to others developed previously, with a slight difference: the tooltip will be hidden from display abruptly, since the “fade” argument hasn’t been passed to the “tooltip()” method. Of course, the best way to understand how this application works is by trying it out on your own browser, so I encourage you to do that.

Also, feel free to edit all of the code samples included in all the articles that comprise this series. This will help you to acquire a more solid background in using the handy jQuery Tooltip plug-in. No matter what you do, one thing is certain: you’ll have a great time working with it!

Final thoughts

We’ve come to the end of this series. But there’s no reason to feel down actually, since in this group of articles, you learned how to incorporate professional-looking tooltips into some web page links by using the excellent jQuery Tooltip plug-in.

As you saw for yourself in all of the code samples developed in this series, the plug-in is extremely easy to configure and use, and offers a good level of customization. If you’re planning to add a killer feature to your web site, the Tooltip plug-in is definitely a good option to consider.

See you in the next web development tutorial!

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.