Easiest Tooltip and Image Preview Using jQuery
Oct 19 2009
What this script does is adds an element to the body when you roll over a certain object. That element’s appearance is predefined with css (positioned absolute and styled) so all we need to do is fill the element with content, calculate mouse position and make it move accordingly. When cursor is moved over he object, element moves with it and when cursor roll out, the element is deleted.
Here are couple of examples where you can see this script in action.
Example 1: The Simplest jQuery Tooltip
The script takes a title attribute of an A tag and place it inside the popup element.
Here is the code :
Example 2: Image Preview Gallery
Here we have a bunch of thumbnails. When each thumbnail is rolled over, script will load an image that we have linked in HREF attribute of an A tag. That makes this method accessible as well, because user can still access the target image even with disabled JavaScript.
Here is the code :
or if you want to use caption add a title attribute:
Example 3: Links With URL Preview
This demands a bit more effort but it might be worth it as an extra feature to add to your sites. What you’ll need here is a small size screenshot of the target url. You’ll put screenshot image location in in REL attribute of the A tag and script will do the rest.
Here is the code :
again, if you wish to use caption add a title attribute:
Css Globe</a>
Bookmark this..
