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 - Assigning different coordinates to the image-based tooltip (Page 3 of 4 )
As I expressed in the section that you just read, it’s possible to create several variations of the image-based tooltip shown before, while keeping its initial functionality the same. In this case, I’m going to create a graphic previewing application that will use the following sample image:
Now that there’s a graphic available for development purposes, I'm going to build the tooltip application, whose source code looks like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
As you can see, the above code sample implements a basic tooltip mechanism that shows the actual-size version of the sample image you saw previously. However, the most relevant detail to note here is that the application uses the “top” and “left” options to modify the default coordinates at which the tooltip will be displayed on the browser.
While this specific example is really quite primitive, it does show how to build different image-based tooltips simply by adding a couple of extra parameters to the “tooltip()” method.
Now that you've grasped the logic that drives the previous example tooltip, I’d like to finish this article by showing another interesting variation of it. It will preview a thumbnail image with the fade out effect disabled. If you wish to learn how this final example will be developed, I suggest you click on the link below and read the following section.
JavaScript 
Building Image-Based Tooltips with the jQuery Tooltip Plug-in
