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">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Tooltip Example 1</title>
<link rel="stylesheet" type="text/css" href="jquery.tooltip.css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.dimensions.js"></script>
<script type="text/javascript" src="jquery.tooltip.js"></script>
<script type="text/javascript">
// assign tooltip to links after web page has been loaded
// delay tooltip display 400 ms, use top and left coordinates
$(document).ready(function(){
$("img").tooltip({
delay: 400,
track: true,
fade: 250,
top: -25,
left: 40,
bodyHandler: function() {
return $("<img />").attr("src", this.src);
}
});
});
</script>
</head>
<body>
<img src="sample_image.gif" width="125" height="100" alt="Sample Image" />
</body>
</html>
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.
Next: Building a tooltip application with the fade out effect disabled >>
More JavaScript Articles
More By Alejandro Gervasio
