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.
More Uses for the jQuery Tooltip Plug-in`s bodyHandler Option - Review: building an image tooltip (Page 2 of 4 )
Since my plan here consists of creating a simple image-based tooltip that will look pretty similar to the ones built in the preceding installment of the series, it won’t hurt to recall how they were developed, right? Please take a fresh look at the complete source code for these sample tooltips:
(example on building an image-based tooltip with mouse tracking enabled)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
As shown above, the first example shows how to build a basic previewing mechanism for a thumbnail image, by means of the already familiar “bodyHandler” option. In this particular case, the full image will be displayed next to the corresponding thumbnail, and it’ll follow all of the mouse movements, since the “track” option has been assigned a value of TRUE. On the other hand, the second example implements a similar previewing system, but with a subtle difference, since the mouse tracking feature has been disabled.
To complement the two previous code samples, here’s a screen shot that shows the output they generate:
At this point you hopefully recalled how the previous code samples do their business, so it’s time to continue developing some interesting variations of image-based tooltips. Basically, in the next few lines I’m going to create an application like this, but where the default coordinates at which the tooltip will be displayed on screen will be modified via the “top” and “left” arguments. You'll probably recall our discussion of these arguments in some preceding tutorials.
Of course, the full details regarding the development of this new tooltip application will be given in the following section. Therefore, click on the link shown below and keep reading.
JavaScript 
Building Image-Based Tooltips with the jQuery Tooltip Plug-in
