Easiest Tooltip and Image Preview Using jQuery

written on:8 May, 2008 by Alen Grakalic

Easiest Tooltip and Image Preview Using jQuery

Share on Facebook Tweet this Delicious StumbleUpon Reddit Subscribe

I love jQuery and the way it makes developer's life easier. Although it took me a while to accept it and I still prefer to write my own stuff, I can't deny its advantages. Recently I had a project that demanded a rollover image preview. You know, one of those tooltip-like bubble popups that appears when you roll over link or a thumbnail. Since we were already using jQuery on that project I decided to take it easy and investigate what can be done with that extraordinary library. So I came up with a script so simple it hurts! The best thing yet is that it can be applied for a variety of purposes. Today I will show you 3 examples of using the same very, very simple script.

Download all 3 tricks in a bundle

Features and Principle

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 Ever

The script takes a title attribute of an A tag and place it inside the popup element.
Html looks like this:

<a class="cssglobe.com" class="tooltip" title="Web Standards Magazine">Roll over for tooltip</a>

View this script in action

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.
Html:

<a class="1.jpg" class="preview"><img src="/img/spacer.gif"> 

or if you want to use caption add a title attribute:

<a class="image.jpg" class="preview" title="Great looking landscape">Roll over to preview</a>

View this script in action

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.

	Like so:
	
<a class="www.cssglobe.com" class="screenshot" rel="cssg_screenshot.jpg">Css Globe</a>

again, if you wish to use caption add a title attribute:

<a class="www.cssglobe.com" class="screenshot" rel="cssg_screenshot.jpg" title="Web Standards Magazine">
Css Globe</a>

View this script in action

Download all 3 tricks in a bundle

About the author

Designer, developer and a passionate standardista. Long time web professional with huge experience in all types of front-end work. Founder of Css Globe and creator of Easy front-end framework.
To get in touch, visit Alen's personal page, follow Alen on Twitter or become a Facebook friend.

Enjoyed the article?

Then don't miss our next one! Subscribe to our RSS feed or share it with your friends.

Share on Facebook Tweet this Delicious StumbleUpon Reddit Subscribe

Comments

David Appleyard 8 May, 2008

Great article - that's an incredibly easy way of achieving effects which would seem complicated at first glance.
Steph 8 May, 2008

Neat! I really like example #3!
Boris 8 May, 2008

Woldn't it be better to make a plugin out of it :)
YellowLlama 9 May, 2008

Very cool.. nicely done :)
Janko 9 May, 2008

Goog examples. I started to use jQuery recently and I am glad there is more and more articles about it.
Ivan 9 May, 2008

Nice article, very useful...
Dragon 10 May, 2008

Plug and play!
Josh Darville 10 May, 2008

Great site, if you ever wanted to add a great presentation to your site please contact me. I'd love to work with you. I create custom website videos that infuse graphics, text and sound.

www.TheMediaZoo.com

my name is Josh
JoshD@themediazoo.com
Subash 11 May, 2008

A CSS freak just got new ticks up his sleeves ;)

Thanks Alen.
webpixelkonsum 11 May, 2008

My favorit is example three.
Thank you for your nice work.

Ralph
AndreiZ 11 May, 2008

Great article- i searched it for a lon time. Thanks you
Senko 12 May, 2008

Great script! I reworked it into a plugin:
blog.senko.net/static/jquery.csstooltip.js
Osvaldo 13 May, 2008

Excellent article! Good samples.
Juan 14 May, 2008

Great script! Thank you!
Sorry as I'm a newbie with Javascript: How could I make the big image displaying on top or to the left instead of to the right of the small image?
paul 16 May, 2008

very nice relevant scripts, thanks!
snetcher 17 May, 2008

Give please, how to add a couple of variable - meaning in the href attribute
ana gomez 20 May, 2008

Example 2 is great idea.
payastr 22 May, 2008

nice system. thanks
Andrew Cornett 22 May, 2008

Shoot. Is there a good example using Prototyle/Scriptaculous?
Vlad 26 May, 2008

Hi, thanks for the tip!
There is one problem with this script - for some reason if the script is outside of an UpdatePanel (Ajax.net) it sometimes "gets confused" and removes the title value but never returns it or shows title value of one link on other one (because this.t is never gets erased for some reason)
did anyone encounter these issues?
does anyone have a fix?

Thanks again
evodesign 28 May, 2008

This is really nice.
Thanks
limitless86 29 May, 2008

This is fantastic, finally i can do away with all those over branded pre written solutions, much appreciated!
Masey 29 May, 2008

Great script - but can anyone tell me how to get the tip to appear to the left of the cursor? I've tried changing the "xoffset" and "yoffset", but that's not an adequate solution as each tip I am using is diferent sizes and the one setting doesn't work for all.

Any help here would be greatly appreciated.
intelligenc 1 Jun, 2008

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.
Charles 3 Jun, 2008

Hi,

Is there a way to simply show the content of a hidden div in this tooltip ?

Thank you

Charles
Cameron 9 Jun, 2008

Hi, great trick! Love the simplicity and I'm now implementing on my personal homepage. Works fine on text links, but I'm having issues getting example-3-style to work on an image map. Anyone care to give me a few pointers on what I may be doing wrong / how I can get this to work? Thanks - cameron
Dalain 10 Jun, 2008

Clean, and nice code.

I used the id tag as my href to allow a preview and also the ability to link to another page.

Useful if you have a thumbnail of an image, and you want to link to an actual page.
Still working on an image map solution.
Jonathan Concepcion 14 Jun, 2008

I love this image preview its perfect to my recent project.
Sun 14 Jun, 2008

I come from China,you are so great!
Nice code!I like it very much.

Sorry for my poor English .
Alex 19 Jun, 2008

Thank you so much for this, I'm a total javascript "noob" and I was able to adapt it for my needs within 3 seconds.

Thank you, Thank you, Thank you!!
Dave 20 Jun, 2008

This sucks....seriosly....either make a plugin or keep it to yourself
Muneef Hameed 20 Jun, 2008

WoW!
i like it!
Olivia Bell 21 Jun, 2008

#3 is great, much better than things like Lightbox - faster etc
Ravi 21 Jun, 2008

Great code! Thank you very much... i was looking exactly for this
Ravi.
Abayomi Oyewumi 23 Jun, 2008

Thanks a million
u just added to a life
greeeeeeeeeee
Albano 24 Jun, 2008

Its great, really. Just a question: is there a way to make it be in the same page with lightbox and make both work? If I put it, my lightbox quits working. Regards.
Fred Riley 27 Jun, 2008

The tooltip rollover can be implemented without script, using the title attribute of a XHTML element, eg:

<a class="index.php" title="This is the home page">Home</a>
Both IE7 and Firefox 2 render this as a tooltip on mouseover. Ok, it's not strictly what the title attribute should be used for, but it's fairly common practice these days. Think of it as 'off-label' tagging ;-)

Fred
Umer Tahir 4 Jul, 2008

Check out these tool-tips:

jim-murray.ca/shows.html

Just hover over some of the underlined shows.
Enrique Espinosa 8 Jul, 2008

I found your image preview to be by far the easiest and cleanest to implement. However, if found that the latest version of Firefox 3.0 for Mac to not hover the image and puts it at the bottom of a main page content. Not sure if this is a problem fixed within your script, or if it's a Firefox issue.
LJ 8 Jul, 2008

Hi, I am having some issues with the tool tip pop up showing UNDER form elements to the right of the rollover image... any suggestions on how i get it sitting on top of these? or getting it sitting to the left of the image rather than the right? thanks!
cyberbuff 10 Jul, 2008

great.
James Breen 10 Jul, 2008

These are great but they don't validate, what a disappointment. I am looking for some tool tips that validate. I am a web designer and it looks bad if I have a site that does not validate.

validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fcssglobe.com%2Flab%2Ftooltip%2F01%2F

Thanks
Jim
Mark Abucayon 13 Jul, 2008

wow I like it, in fact I used it in one of my websites, Thanks for sharing this one. I really like it. Good job
gnysek 13 Jul, 2008

It's super! I searching something similar to mootools tip and here I found it! Thanks for this script.
I don't belive that it's so easy!
Alex 15 Jul, 2008

This way is really great, but i found only 1 way for displaying ToolTip ABOVE the cursor:

$("#preview")
.fadeIn("fast",function(){
$("#preview")
.css("left",(e.pageX + xOffset) + "px")
.css("top",(e.pageY - $("#preview").height()) + "px");
yOffset = $("#preview").height();
});

Maybe there Is a better way?
People Search Dude 17 Jul, 2008

Sweet! Been searching for something like this! Saves me from having to figure things out and code by hand.

Clean implementation too!
Toxane 20 Jul, 2008

Thanks Alen, very nice.
Em 21 Jul, 2008

I've been looking all day for this.

Unfortunately, there are no instructions, so I'm not quite sure how to connect the js files in the download with the textarea cut and paste code.
steve 23 Jul, 2008

hello, thanks for the great script. I have it working on one of my projects, but is there anyway that it can display the tooltip to the top and left of the cursor, rather than to the bottom right? any help would be greatly appreciated.
steve 23 Jul, 2008

sorry, I meant I am trying to get it to display to the top and right of the cursor. thank you.
Ranjit 24 Jul, 2008

WoW! Thanks Alen for you great and simple wok on "The Simplest jQuery Tool tip Ever"
mark 27 Jul, 2008

Absolutely LOVE the script but there's one glaring problem: the rollover images are appearing "off the screen". Essentially they're going outside the boundaries of the browser window. The image always appears at the right of the cursor instead of the left once the image has reached the edge of the window.

Has anyone figured this out? I don't want to have to resize my rollover images but so far I can't think of any other way to keep the images inside the window.

HELP!!!
Firebubble Design 27 Jul, 2008

Thanks for the cool javascripts! The website preview script is pretty neat.
Sander Houttekier 28 Jul, 2008

How can i make the image preview script use the image width as width for the preview div?
because your images are perfectly the same width you dont have a problem, but as soon as there are images with other proportions it gives troubles... i did already make sure that no image went over the given width... but smaller images now have lots of whitespace around them...

is it possible to make the width of the preview div, automaticaly use the width of the image itself?
josef 30 Jul, 2008

hi! i found this script - this is quite useful! but i have one small problem: an image as link-tooltip will always been displayed downwards .. so that the tooltips at the end of a list can't be seen any more. you can see it at: www.fckitz.at/1mannschaft/1mannschaft_kader.asp.

can anyone help me how to fix it? i'd like the image to open upwards - thanks!
Website Designer Perth 31 Jul, 2008

Many thanks for this - especially the URL preview. Dropped everything to 'plug' it in to our website.
raminhos 6 Aug, 2008

Real nice my friend.
Many tks for this must :)

Keep the good work
moshe 6 Aug, 2008

hey

great script
has anyone managed to solve the issue that mark mentioned above - that the tooltip sometimes appears off screen>?

thanks!
josh 8 Aug, 2008

That's all well and good, but in point of fact you aren't actually showing what you did, eh? Pretty site design, though.
Fiyat 8 Aug, 2008

thanks you very much
sjl 11 Aug, 2008

All of these are excellent pieces of javascript, jQuery is a amazing resource. I had been thinking about using the url preview on a template site I'm developing.
Thanks for the post.
rob 12 Aug, 2008

How do you change the background color and border colors and the fonto colors??, please any help much apreciated.

All the best and thanks for sharing your knowledge.
disenando 12 Aug, 2008

Juan, LJ, steve and mark,
I had the same problem but I do know the minimum pagesize and the large image size and its position to the right, in my case 400px for the image and 758px for the page. What I did is set yOffset = -430; i.e. 30 pixels lower than the image because Firefox has a bug if the image is displayed "below" the pointer cursor (the hand). This works.

If we are to find the solution to a dynamic setting so it automatically detects whether the image will be out to the right, we have to set a condition to show (e.pageX - yOffset > $(document).width()) = align to the cursor's left.

By the way, yOffset and xOffset should be reverted.
Dave 12 Aug, 2008

Very nice, Alen! You just saved my butt ;-)
Hasan Tayyar BEŞIK 14 Aug, 2008

You can remove the class specify from the main.js and so this can be applied all "a" tags
But you must add this line before $("body").append("<p id='tooltip'>"+ this.t +"</p>"); :

if(this.t!="")
egypt 18 Aug, 2008

thank you for suggestion! I have made cruise to find your site in 50 sites. Cool! Thank you! But still looking for a simple WP ready plugin for image tooltip. Thanks!
coderbari 19 Aug, 2008

Thanks for the great Tooltip solution.You really saved my life.I was searching to find the best one and I think this is the best so far.
Poppy 21 Aug, 2008

Thanks Alen for the simplicity!
Eddie 22 Aug, 2008

Hi Alen, this one is really nice. I use it with the actual <a class="justintadlock.com/archives/2008/04/13/cleaner-wordpress-gallery-plugin">Cleaner WordPress Gallery Plugin</a>. In combination with your JS snippet it rocks. Thanks a lot. <a class="www.mindspage.de/2007/09/23/iaa-2007-frankfurt/">Here</a> is an example. Greetings from Germany.
PS. This would be a realy good WordPress Plugin :)
BLACK SHARK MEDIA 24 Aug, 2008

Many thanks for this script. It has a little bug, the images overlap the windows sizes.
We've fnd a solution to that:
At x axis put the value 400
At the y axis put the value - 400
So the image will be aligned starting from the top left corner not bottom right corner.
Cheers.
Günther 26 Aug, 2008

Hi, I am having some issues with the tool tip pop up showing UNDER form elements to the right of the rollover image... any suggestions on how i get it sitting on top of these? or <a href:"www.gugl.at/irinox.html">Irinox Schockfroster</a> getting it sitting to the left of the image rather than the right? thanks!
web design los angeles 4 Sep, 2008

Now that's a time saver! Thanks for doing such a great job.
Anthony 16 Sep, 2008

Great script! I am trying to use #3 on a webpage and everything works great except that I would like for the script to not show a tooltip if the link has the attribute rel="something" in it. I have already adapted your script to make all links on the page have a preview by changing "a.screenshot" to "a". Now I want some of them not to show a preview. Is this possible? How so? I am a total noob at Javascript. In fact, just started getting in to it last week. Also, it would be nice if the tooltip stayed inside the window (jumps to left of cursor if too close to the right, jumps to top of cursor if too close to bottom. Instead it always is below the cursor so if you are too close to the bottom of the window then it cuts off the preview.
James Wigger 17 Sep, 2008

Hello, just like to say fantastic piece of kit and it is perfect for my needs. However, I'm having an issue where it will only show up once and after that it will come up blank.

Thanks again,
James
mastr3s 19 Sep, 2008

Does anyone know how to combine this with PHP code so i can create image gallery using php and has image preview on thumbnails
please i really need it i already try many time using this kinda script and put it on php code but work not really nice the image preview wont go away so if anyone one please response to mastr3s@gmail.com
Andrew 25 Sep, 2008

Love the script. Having 1 issue with #3 though. Works unless I move the cursor in a particular way that I can not find a pattern to yet. Then it throws a script error in IE7. HELP! Thanks!
ERROR: Array length must be assigned a finite positive number
gnaffetto 12 Oct, 2008

great!!!
i've tried immediatly and this is my example (i'm from italy): censuralegale.helloweb.eu/docu/
i try: are you interesting to write a mediawiki extension of this script? wikipedia with this feature will be GREAT!! (i've seen an extension that take data from a database:www.mediawiki.org/wiki/Extension:WoWItem)

thanks.
gnaffetto
Alexandre 17 Oct, 2008

Thanks for this great piece of code,
this is really the easiest tooltip example.

Alexandre
Mark 20 Oct, 2008

hey, great job on this one! just one thing though, how can you position the tooltip based on the (x,y) of the image (thumbnail) you roll over instead of the mouse position?

cheers
Bruno 20 Oct, 2008

Thanks a lot of the extremely useful script!

To position the tooltip depending where you are, you need to rewrite some of the code using the offset() property of jQUERY.

var toolTipPosition = $(this).offset(); //Declare the Offset object
var offsetX = 0;
var offsetY = 0;
//Then in the hover property
$("#tooltip")
.css("top",( toolTipPosition.top - posiY) + "px")//Will set where the link/thumbnail is horizontally
.css("left",( toolTipPosition.left + this.offsetWidth/2 + posiX) + "px") /*Will be positioned to the middle of the link/thumbnail, you can alway remove this.offsetWidth/2 to remove the middle placement thing.*/
//Remove the mouseover function and your set!

.fadeIn("fast");
weblover 2 Dec, 2008

Thank you very much for this clear and very useful examples of jtip.
Mahmoud M. Abdel-Fattah 2 Dec, 2008

I'm having a problem using this plugin, it overlap the page height !!
how can I fix this ??
Here's a demo of the problem :
alia.hdeya.com/projects/
scott 9 Dec, 2008

Example 3 will not work.

Say theres a broken link in main.js " + this.rel + "

any ideas
Webagentur 2 Jan, 2009

Thank you ... this tutorial has me realy very helped.
Gustavo Baldera 9 Jan, 2009

how can I load this using the mouse event of "onmouseover" and "onmouseout"?
A.P 13 Jan, 2009

Css Globe CSS and Web Design News