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 href="http://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 href="1.jpg" class="preview"><img src="1s.jpg" alt="gallery thumbnail" /></a>

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

<a href="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 href="http://www.cssglobe.com" class="screenshot" rel="cssg_screenshot.jpg">Css Globe</a>

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

<a href="http://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:
http://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 href="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:

http://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.

http://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: http://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 href="http://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 href="http://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:"http://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): http://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:http://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 :
http://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

Brilliant ! Thanks !!!
vuelos 14 Jan, 2009

Thanks !!!
Emanuelle 14 Jan, 2009

beautiful example(number 3). I just have one problem with it. I have a page with 60 tooltips so I use it 60 times on the pages to show pictures. The width and height of the pictures vary and sometimes it doesnt show the picture. does it has to do with the different sizes? If not what could it be?
Tau 21 Jan, 2009

if the image on the right bottom, tooltip window outside the screen. How to verify that the picture is always placed on the screen?
xaer8 22 Jan, 2009

Hi, thanks for the most great and useful information you share here! Anyway, i would like to know more what if we can hover the mouse over the image and preview the big image, plus on click it will go to the respected external url of the image we set. Is it possible? I've seen this one on www.bestwebgallery.com. Please let us know if we can do this also. It will be a more useful addition to this article. Many many thanks in advance.
Hiral Thaker 23 Jan, 2009

HI intelligenc,

I have the same problem. But don't know how to solve this.

What about this z-index. Please let me know. I am not good to design

thanks
Hiral
Chris Barnett 23 Jan, 2009

Excellent Alen!

Thank you so much for this tutorial and effort you put into the script. I am going to try and implement the tooltip now. Hoping it is as easy as you say it is. Wonderful work and always enjoy your posts. Keep up the great work..

Cheers!
Tibor 26 Jan, 2009

Great tips! I was wondering if this could also be done without the image being a link? Thanks in advance!
T 27 Jan, 2009

Genius!

Just what I was looking for!

Thanks :)
fesh 27 Jan, 2009

Great This is what i need! I just need some little modification. thanks!
Manny Calavera 3 Feb, 2009

This modification would make the tooltip to be active on every page element that has a class of "tooltip". Also, there's a fix for the tooltip being displayed somewhere on the bottom of the page on some rich design websites. I hope you'll find this useful and thanks for the "tip" :D

this.tooltip = function(){
/* CONFIG */
xOffset = 10;
yOffset = 20;
// these 2 variable determine popup's distance from the cursor
// you might want to adjust to get the right result
/* END CONFIG */
$(".tooltip").hover(function(e){
this.t = this.title;
this.title = "";
$(this).append("<p id='tooltip'>"+ this.t +"</p>");
$("#tooltip")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px")
.fadeIn("fast");
},
function(){
this.title = this.t;
$("#tooltip").remove();
});
$(".tooltip").mousemove(function(e){
$("#tooltip")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px");
});
};
Hiral Thaker 5 Feb, 2009

Hi,

I am using this utility and working fine. But one problem..

When I move the cursor on the image some images which are at last displaying the tooltip image after the actual screen. So I can see only half image. I tries to change xOffset and yOffset but still not solved

Please help

Thanks in advance
Milind Ghatkamble 7 Feb, 2009

Thank you very much freind i was really and desperatel in need of that script....thanks a lot again Alan.
Xboy 11 Feb, 2009

Third script is amazing. I was just searching for something like it. Thank you a lot for sharing it!
Edward 15 Feb, 2009

Hi Alen Grakalic, great site and great tooltip! it looks great. I was wondering f there is any problem if i use this code in my premium wordpress theme?? Please let me know, i really want to use this tooltip. Only if you can, can you respond this by email... Thanks and really great job. Good luck. bye
modoko 22 Feb, 2009

Great script! Thank you!
karacabey 22 Feb, 2009

nice work :) thanx
Fedeweb 25 Feb, 2009

Hi! Great work!

one question: how can i use a tooltip with different offset in the same page?
Artevideo 26 Feb, 2009

Great script!
Thanks
Tobias 26 Feb, 2009

Hey there!
Your script is great, I just included it and it works perfectly. I'm using Script #2, the Tooltip for pictures.

But as I'm not too much of an expert, please allow this question:
Is there any way to link to a path instead to the picuture? I mean some kind of workaround maybe?

I would like to use this script for a shop-like application, but of course the clients are supposed to see the detail-page when they click on the picture, instead of a bigger version of this picture.

Thanks in advance for clarifying, and of course thanks for the great script.
All the best from germany!
Tobias
Jim 28 Feb, 2009

Thank you for your work! I'm using your image preview and have a question - is there a way to have the window not move and stay static in one position? Thanks.
Ischia 2 Mar, 2009

I need somm effect for open windows... is possible on this website?
Alistair 3 Mar, 2009

Thank you very much for this, i'm using this over at my portfolio.
peter 5 Mar, 2009

This is awsome! I was using the CSS Image Viewer of Dynamic Drive for my thumbnails, but I had problems with the links overlaping on my suckerfish dropdown menus. Now with your solution I solve the problem! no more overlaping on the drop down...
Thank you so much! This was driving me crazy for the last two weeks!
MegaFill 9 Mar, 2009

Nice tooltip! tnx
Anton 11 Mar, 2009

There is a cool plug-n-play script for adding tooltip for the part of the image - http://www.taggify.net . When user moves mouse over the object on image - frame is shown around the object and other parts are faded. See demo at http://www.taggify.net/demo.aspx
Rafael N Samapio 11 Mar, 2009

Thanks, very useful;
Sfondi 16 Mar, 2009

Thanks a lot for this tooltip code!
Chanie 16 Mar, 2009

This is great - simple, clean and concise. Does what you need it to and nothing else. I've used the simple tooltip in a few spots on www.sidd.ca - thanks for making the code available.
John 18 Mar, 2009

I have a problem when i use tooltip #1

the text display under the next pic or flash object

any idea how to solve??

thanks
zahid 24 Mar, 2009

Very since effects, nice and clean code, done very nicely, Hats off to you
lamuy 31 Mar, 2009

thank's
web design norwich 31 Mar, 2009

This is a great way of increasing website usability
GadElKareem 1 Apr, 2009

can you explain how to do that using the new method "live"
GadElKareem 1 Apr, 2009

This is to add the "live" method to the tooltip
tooltip = function(){
/* CONFIG */
xOffset = 15;
yOffset = 10;
// these 2 variable determine popup's distance from the cursor
// you might want to adjust to get the right result
/* END CONFIG */
$("a[title]").live('mouseover', function(e){
this.t = this.title;
this.title = "";
$("body").append("<p id='tooltip'>"+ this.t +"</p>");
$("#tooltip")
.css("top",(e.pageY + xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px")
.fadeIn("fast");
});
$("a[t]").live('mouseout',function(){
this.title = this.t;
$("#tooltip").remove();
});
$("a[t]").live('mousemove', function(e){
$("#tooltip")
.css({ top: (e.pageY + xOffset) + "px", left: (e.pageX + yOffset) + "px"} );
});
};

// starting the script on page load
$(function(){
tooltip();
});

still need a way to move the tooltip up when it reaches the page adges
Steven 2 Apr, 2009

This tooltip is not working in Opera 9.51 :(
joe 7 Apr, 2009

Can anyone merge this one to get it to work with the screenshot version so it stays in the viewport?

http://www.kriesi.at/archives/create-simple-tooltips-with-css-and-jquery-part-2-smart-tooltips
gino 8 Apr, 2009

With image and shape area ... don't work whit internet explorer... help me please!
Mahboob ISLAM 16 Apr, 2009

Good Job ,well done
peter 17 Apr, 2009

All this is really a tough matter. Several months ago I considered myself completely ignorant of all this, but found a nice ebook http://file.sh/jQuery+torrent.html and first of all learned the theory, which is now converted into practice.
Ryan 19 Apr, 2009

A simple solution that seems to be 'over-engineered' elsewhere, lightweight and just what I needed, thanks.
Emil 19 Apr, 2009

Is there a way to implement #2 but have the link go to a page instead of the image? This is an awesome script btw, very simple and lightweight. Great job.
ArthasMX 23 Apr, 2009

wow! so easy :D
Luca Barbonaglia 24 Apr, 2009

Hello,
I've dowload Links With URL Preview it's beautiful but I've a little problem, the image is on the right of mouse and I would like on the left. This is possible ? If yes tell me about please.
Thank you so much
Luca from Principaute of Monaco
robert 28 Apr, 2009

Is there any way to make the first script use the alt tag instead of the title tag?
Anand 30 Apr, 2009

JQuery & People like you make life easy & exciting for open source developers.

Thank You
Aashish Singh 1 May, 2009

Its Great
R Valdez 1 May, 2009

Thanks. After search the net for some time and coming up with *plugins* to do this and thinking there's got to be a better way, I found the *easiest* way on your site.
zhuge 4 May, 2009

Plug and play! I come to China
K Nambissan 5 May, 2009

This was an amazing resource..thanks for posting this and making it available for easily..really appreciate it..:)
Jason Grant 6 May, 2009

Very nice work. Highly useful, light and works simply and without any unnecessary bells and whistles.
LP 8 May, 2009

demasiado bueno para ser facil!!! muy bueno!!!, felicidades
Ale 8 May, 2009

Images are showing up behind other div tags, how do I fix it?
thank u
me , myself and i 12 May, 2009

how do i make that on every page even if its not class tooltip
tool tip shows on alt="this.t"

$('#tooltip').html($(this).attr('alt')).show();
i tryed this but i cant get it work
Derek 12 May, 2009

Anyone have issues with both the custom tooltip and the default tooltip showing in IE? I am working with the area tags for an image map.
Darthslade 14 May, 2009

yes I am having the same issue in IE showing the title tag as a tool tip in addition to my tooltip...anyone know how to disable?
P.S. 16 May, 2009

Hi,
This function looks awesome, but I am completely green at this jQuery or .js thing, so I have no idea how to add this to my website.
I tied this:
I uploaded all the files from 03 folder to my theme files main folder, then in my theme file between <head> tags I added this:
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="main.js"></script>
Then in my site I posted link witch looks like this:
<a href="http://www.cssglobe.com" class="screenshot" rel="full link to img">Css Globe</a>
But it is no good... Then I rollover it img does not appear...
What could be the cause of this malfunction?
May be .xml file need so editing?
Please help me I would be very grateful :)
Dale Larsen 19 May, 2009

Is there a license for using this script on your own page?

Which license is it filed under?
TheRose 21 May, 2009

JUST a thank you for this very clear and very complete tut and great sources.
Very fluid and easy to use.
Thanks again for sharing.
XiShaN 22 May, 2009

So nice explanation....
keep going...
Tim 23 May, 2009

nice tip, thanks
Tim 24 May, 2009

Thanks for posting this. I have run into an issue with using both #1 and #2 together on one page.

Example #2: I want to adjust the x and y offset.

Example #1: I want to keep the default offsets.

For some reason its reading the offsets in the last js file listed on the page and applying to both. It would seem like you can have a different offset for each kind of tip. Is this a bug?

<script src="js/ss-pview.js" type="text/javascript"></script>
<script src="js/tooltip.js" type="text/javascript"></script>
PiYU 27 May, 2009

Thank you Buddy! I just needed this as i want to learn scripting and programming for web. Thank you again!

This is simplest and easiest method to do it!
Sam 27 May, 2009

Must be possible to keep this in the viewport no? Can't you add something like:

mousemove(function(kmouse){
var border_top = $(window).scrollTop();
var border_right = $(window).width();
var left_pos;
var top_pos;
var offset = 15;
if(border_right - (offset *2) >= my_tooltip.width() + kmouse.pageX){
left_pos = kmouse.pageX+offset;
} else{
left_pos = border_right-my_tooltip.width()-offset;
}

if(border_top + (offset *2)>= kmouse.pageY - my_tooltip.height()){
top_pos = border_top +offset;
} else{
top_pos = kmouse.pageY-my_tooltip.height()-offset;
}

my_tooltip.css({left:left_pos, top:top_pos});
Sam 27 May, 2009

@Tim, if you want to use two of the scripts together on a page, with different offsets, just change one of them to:

x_Offset =10;
y_Offset =20;

And change all instances of xOffset/yOffset to x_Offset/y_Offset too
Dain 28 May, 2009

I decided to write this using the awesome jQuery ".live()" functionality as well. I should have read the comments. d'OH!

Anyway, here's my code:

//tooltip refactor with live so i don't have to reinit and break stuff

$("a.tooltip").live('mouseover', function(e){
/* CONFIG */
var xOffset = 40;
var yOffset = 0;
/* END CONFIG */
this.t = this.title;
this.title = "";
$("body").append("<p id='tooltip'>"+ this.t +" <img src='_images/tooltiparrow.png' /></p>");
var tipWidth = ($("#tooltip").width() / 2) + 10 ;
$("#tooltip")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px")
.css("margin-left", "-"+ tipWidth +"px")
.fadeIn(100, function() {

});
$(this).mousemove(function(e){
$("#tooltip")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px")
});
});
$("a.tooltip").live('mouseout', function(e) {
this.title = this.t;
$(this).die("mousemove", "mouseout");
$("#tooltip").remove();
});
Dain 28 May, 2009

Re: my above comment... ignore the empty function on the fadeIn callback, I just forgot to remove it.
Gabriel Verdejo 28 May, 2009

Very usefull and easy to use, Congratulations, great job!!!!
asad 29 May, 2009

this is veryinformative but the thing i m looking is not there do u tell me how i send the text from mean page to the tooltip
Thomas Svensson 29 May, 2009

Nice work Alen. I have a problem though. I'm setting the offset quite near the mouse pointer and that results in that the script don't render the new position of the tooltip as quickly as you would it to render. When the mouse pointer is rolling over the the tooltip the tooltip disappears, not good :( Anyone else experiencing this and have a solution?
SLA80 1 Jun, 2009

I modified it slightly:

1. Fixed a BUG. Please, fix it too: Place "if (this.t)" just before "this.title = this.t;". It is possible to reproduce the bug at least in Chrome browser: press "Reload", and then move your mouse pointer FAST to the place, where element with tooltip will appear. The next moment after page reload, standard (non-decorated) tooltip will appear. Move mouse away (TOOLTIP TEXT IS DESTROYED RIGHT NOW), and back to the element. Deporated tooltip appears, but its text is "undefined", because its text was destroyed forever.

2. Replaced $("a.tooltip") with $(".tooltip") , so not only links, but any other element with tooltip (<img>, <span>, etc.) will display decorated tooltips.
Marko Vierimaa 3 Jun, 2009

Thanks for the good script. Here's my solution to keep the image preview in the viewport. The following will prevent the image from going below bottom of the viewport.

$(".imageTooltip").mousemove(function(e){
var posY;

if (e.pageY - $(window).scrollTop() + $('#tooltip').height() >= $(window).height() ) {
posY = $(window).height() + $(window).scrollTop() - $('#tooltip').height() - 15 ;
} else {
posY = e.pageY - 15;
}
$("#tooltip")
.css("top",(posY) + "px")
.css("left",(e.pageX + 15) + "px");
});
Eddie 3 Jun, 2009

Hi,

great script thanks.
I am trying to scale the image that is previewed, however the first time the mouseover event occurs on the image link my pop-up is empty, then the next time it's fine. I know it is the way I am populating the width value of the image that is causing it, but I dont understand why, I thought it processed the code from top to bottom, so it should always get the image size first. All my images are different dimensions that need to be scaled correctly. I decrement by 3% each time until dimensions are under max. Any help (from anyone reading this) would be greatly appreciated.

here's my code:

$("a.preview").hover(function(e){
this.t = this.title;
this.title = "";
var newImg = new Image();
newImg.src = this.href;
var picheight = '';
var picwidth = '';

for (i=100;i>1;)
{
picheight = newImg.height * (i/100);
picwidth = newImg.width * (i/100);
i=i-3;
if (picheight < 700 && 500 < maxWidth)
i=1;
}

var c = (this.t != "") ? "<br/>" + this.t : "";
if (picwidth > 0){
$("body").append("<p id='preview'><img width="+picwidth+" src='"+ this.href +"' alt='No Image' />"+ c +"</p>");
$("#preview")
.css("top",xOffset + "px")
.css("left",yOffset + "px")
.fadeIn("fast");
}

},
Eddie 3 Jun, 2009

the for loop above is actually reads:

for (i=100;i>1;)
{
picheight = newImg.height * (i/100);
picwidth = newImg.width * (i/100);
i=i-3;
if (picheight < 700 && picheight < 500)
i=1;
}

and the problem is: on mouseover of image link, first time - image is not loaded, pop-up is empty, why?; second time - works fine.
Conrad 6 Jun, 2009

Hi,

Great little script. Was wondering if it is possible to add a graceful fadeIn/fadeOut effect when hovering over a link?
Mottie 11 Jun, 2009

Hiya,

I love this script, but I needed it to replace the cool DHTML tooltip script from Dynamic Drive. I also fixed the tooltip to stay inside the viewport as well as added a few other features which include setting a background color, font color and tooltip width for each tooltip (and any additional CSS you want). I also made it so you can get the tooltip contents from any object on your page (like a div).

It was a little too long to post here so I posted it on a blog I just started. Please be kind, I only code as a hobby :)

http://wowmotty.blogspot.com/2009/06/new-and-improved-jquery-tooltips.html
Krishan Rodrigo 15 Jun, 2009

Cool, thanks for this.
yans 15 Jun, 2009

Finaly I found script that simple and great ..

matur thankyou maz ....
webmas 15 Jun, 2009

cool...!!!
wptidbits 16 Jun, 2009

Great tutorial here! Never thought it would be that easy. Understandable and user-friendly tips. Hope to see more post like this.
Katherine 17 Jun, 2009

I just wanted to thank you for this excellent script and the examples. I am using it on a site I am currently developing. I used the fixes from SLA80's post, as I had noticed the text become 'undefined' a couple times in my test browser. Thank you!
Muhammad Usman Arshad 20 Jun, 2009

Great collection, thanks for sharing!
JC 23 Jun, 2009

Has anyone managed to get the tooltip to work in any IE yet?
Rúbel Mujica 25 Jun, 2009

Hi,
The script for image preview is great, in fact I'm using it in my webpage, but the xOffset and yOffset variables are inverted when setting the position of the div.
The original code has (in the mouseover and mousemove events):

.css("top",(e.pageY - xOffset) + "px") // should use yOffset for the top
.css("left",(e.pageX + yOffset) + "px") // should use xOfset for the left

and should be:
.css("top",(e.pageY - yOffset) + "px")
.css("left",(e.pageX + xOffset) + "px")

Once I changed this, after configuring this two parameters, everything went just fine.

Thanks!
Allen 28 Jun, 2009

Thank You for making my life easier =)

Sorry, further comments are disabled for this post.

CSS Globe is a web design magazine brought to you by Alen Grakalic and kept fresh with member contributed news and exlusive articles.

Css Globe CSS and Web Design News