Useful and Practical jQuery Image ToolTips Tutorial

Written by Kevin Liew on 25 Feb 2010
115,786 Views • Tutorials


Greeting, I haven't posted jQuery tutorial for quite a while now because I have been busy sketching and working on the redesign of Queness and other projects. Yep, something exciting is coming soon :)

Anyway, in this tutorial, we will learn how to create a thumbnail image tooltip with jQuery. It displays a tooltip image when user hover on the thumbnail with fadein and out effect. It's quite a useful script for your website. The following is a screenshot of the script, make sure you look at the demo to see the whole idea.


I have been thinking of using UL list, but then I think it's not really appropriate because it would be quite difficult to style. Therefore, we will be using a DIV instead. The following image depicts the structure of the html

The structure is pretty simple, a DIV.thumbnail-item has two children - the thumbnail image and the tooltip.

Inside the DIV.tooltip we have an image and SPAN.overlay. The SPAN.overlay has the png image as the background image and it's moved to the top of the image.

<div class="thumbnail-item">
	<a href="#"><img data-src="images/small1.jpg" class="thumbnail" /></a>
	<div class="tooltip">
		<img data-src="images/big1.jpg" alt="" width="330" height="185" />
		<span class="overlay"></span>

2. CSS

As usual, I have put comments on every important CSS styling. If you want to learn more about CSS, you can read my following post :)

.thumbnail-item { 
	/* position relative so that we can use position absolute for the tooltip */
	position: relative; 
	float: left;  
	margin: 0px 5px; 

.thumbnail-item a { 
	display: block; 

.thumbnail-item img.thumbnail {
	border:3px solid #ccc;	
.tooltip { 
	/* by default, hide it */
	display: none; 
	/* allow us to move the tooltip */
	position: absolute; 
	/* align the image properly */
	padding: 8px 0 0 8px; 

	.tooltip span.overlay { 
		/* the png image, need ie6 hack though */
		background: url(images/overlay.png) no-repeat; 
		/* put this overlay on the top of the tooltip image */
		position: absolute; 
		top: 0px; 
		left: 0px; 
		display: block; 
		width: 350px; 
		height: 200px;

3. Javascript

We will be using mouseenter, mousemove and mouseleave events in this tutorial.

  • Mouse Enter : Calculate the position of the tooltip based on the mouse pointer's axis. After that, set the z-index so that it has the highest z-index among the rest of the thumbnails and then set the position of the tooltip and display it.
  • Mouse Move : Everytime you move and hover on the top of the thumbnail, the script will calculate the position of the tooltip based on the mouse pointer's axis and update the tooltip position.
  • Mouse Leave : Reset the z-index and hide the tooltip
// Load this script once the document is ready
$(document).ready(function () {
	// Get all the thumbnail
	$('div.thumbnail-item').mouseenter(function(e) {

		// Calculate the position of the image tooltip
		x = e.pageX - $(this).offset().left;
		y = e.pageY - $(this).offset().top;

		// Set the z-index of the current item, 
		// make sure it's greater than the rest of thumbnail items
		// Set the position and display the image tooltip
		.css({'top': y + 10,'left': x + 20,'display':'block'});
	}).mousemove(function(e) {
		// Calculate the position of the image tooltip			
		x = e.pageX - $(this).offset().left;
		y = e.pageY - $(this).offset().top;
		// This line causes the tooltip will follow the mouse pointer
		$(this).children("div.tooltip").css({'top': y + 10,'left': x + 20});
	}).mouseleave(function() {
		// Reset the z-index and hide the image tooltip 
		.animate({"opacity": "hide"}, "fast");




Like this tutorials? You can express your gratitude by visiting my sponsors on the sidebar or bookmark this post to help me spread it to your friends! :) Thanks!

Demo Download
Join the discussion

Comments will be moderated and rel="nofollow" will be added to all links. You can wrap your coding with [code][/code] to make use of built-in syntax highlighter.

Daniel Bidmon 12 years ago
Very nice tooltip method!
Thank you for it.
Jai 12 years ago
Nice & sleek image preview...
James 12 years ago
Nice script, but it has a coding issue that throws errors on IE 6,7, and 7. We've run into this issue before and know what causes it. Error: "Out of memory at line: 1". After running process monitors on multiple machines freshly booted and monitoring memory useage, we concluded that it is not a memory issue, but rather an error thrown by what appears to be multiple repeat calls to a css file. To make these kinds of scripts work for business, the code needs work.
Bryan Watson 12 years ago
Nice article Kevin, although I think there can be some modifications to make this even more useful AND practical.

The main issue is that it does nothing when Javascript is disabled, and the user has no option to see the larger photo.

I've created a revised demo on my website:

It shows the tooltip regardless of Javascript being enabled, and when it's not, the user is offered a link to the full-resolution image.

Also, I've marked it up as a list, and only used one class for the containing UL. This will save you a bunch of unneeded classes, as you can target everything with specificity.

Some other modifications I've done was to add alt tags to the images (Should be done for SEO and Validation regardless), and have changed the way jQuery handles the animation, simply using fadeOut instead of animate (which isn't needed in this case).
NBA Jerseys 12 years ago
James 12 years ago
and what about cross-browser compatibility?
Omer Greenwald 12 years ago
Great tutorial. For textual tooltips I integrated beautytips jquery plugin in some of my posts and really love it
clippingpath 12 years ago
Photoshop clipping path (PCP), an US based IT firm with its production facility in Bangladesh takes the benefit of time difference with the west provides cheap online volume clipping path service
Web Design Kent 12 years ago
I had a little problem but i've solved it. I'd like to share with you. My problem was z-index problem and I gave "1" and it worked. Because before this I was under my other div which has z-index value and absolute position.
kevin Admin 12 years ago
hi kent, thanks for the tips. Just realized that it has no z-index set in the css. I guess it's better to do it in both css and js. thanks!
Karl 11 years ago
Bryan, thanks for your changes. However, there is a problem with Z-order in IE 7 at lease. (Not in Chrome.)
Ashley 10 years ago
I am adding your tooltip code to a page that has 1.4.2 jQuery elements on it as well. These elements work on their own, but when I put yours in, your code quits working and throws a Javascript error for the 1.4.2 from GoogleAPIs in Internet Explorer. Works great in other browsers. Any suggestions? Thanks!
black 10 years ago
i got the script working with no problems , but i think we can have something changed too , like the tooltip positioning auto towards the top and right too , currently it only adjusts to the top and left , it would be better if it did for all directions .