Building Image-Based Tooltips with the jQuery Tooltip Plug-in

Introduction

If you’ve ever wondered what makes the jQuery JavaScript library so appealing to many web designers, the answer is surprisingly simple: it comes with powerful features that allow programmers to develop client-side applications with minor effort, and offers an extremely friendly learning curve. What else can you ask for?

Well, if all of these characteristics aren’t good enough for you, there’s another one you're sure to appreciate: jQuery has a growing number of handy plug-ins that permit you to perform all sorts of clever tasks in the client without being a JavaScript expert. Indeed, from building Ajax-based image galleries and validating online forms, to attaching eye-popping tooltips to web page links, there’s a plug-in available out there that will surely fit your personal requirements.

As you already know, in this series of articles, I decided to explore specifically the Tooltip plug-in, due to its easy configuration and usage, so it’s time to refresh the themes covered in the previous article. Essentially, in that particular tutorial I explained how to use the “bodyHandler” argument of this plug-in to include some basic HTML in tooltips, thus altering their default appearance and behavior.

In reality, all of the code samples developed so far were quite simplistic and demonstrated only the basic functionality of the “bodyHandler” parameter. But this is about to change. In the next few lines I’m going to show you how to use it for creating the full-sized version of a thumbnail image, a feature that’s implemented on many modern web sites.

Now that you’re aware of the material that you’ll find in this sixth article of the series, let’s learn how to use the “bodyHandler” argument for displaying image-based tooltips. Let’s get started!