Easiest Tooltip and Image Preview Using jQuery

Delicious Digg StumbleUpon Reddit Subscribe to RSS Feed

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:

cssglobe's image 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.

Delicious Digg StumbleUpon Reddit Subscribe to RSS Feed

Comments

David Appleyard on 8 May, 2008 wrote:

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

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

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

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

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

Nice article, very useful...
Dragon on 10 May, 2008 wrote:

Plug and play!
Josh Darville on 10 May, 2008 wrote:

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 on 11 May, 2008 wrote:

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

Thanks Alen.
webpixelkonsum on 11 May, 2008 wrote:

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

Ralph
AndreiZ on 11 May, 2008 wrote:

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

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

Excellent article! Good samples.
Juan on 14 May, 2008 wrote:

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 on 16 May, 2008 wrote:

very nice relevant scripts, thanks!
snetcher on 17 May, 2008 wrote:

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

Example 2 is great idea.
payastr on 22 May, 2008 wrote:

nice system. thanks
Andrew Cornett on 22 May, 2008 wrote:

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

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 on 28 May, 2008 wrote:

This is really nice.
Thanks
limitless86 on 29 May, 2008 wrote:

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

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 on 1 Jun, 2008 wrote:

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 on 3 Jun, 2008 wrote:

Hi,

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

Thank you

Charles
Cameron on 9 Jun, 2008 wrote:

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 on 10 Jun, 2008 wrote:

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 on 14 Jun, 2008 wrote:

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

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

Sorry for my poor English .
Alex on 19 Jun, 2008 wrote:

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 on 20 Jun, 2008 wrote:

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

WoW!
i like it!
Olivia Bell on 21 Jun, 2008 wrote:

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

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

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

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 on 27 Jun, 2008 wrote:

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 on 4 Jul, 2008 wrote:

Check out these tool-tips:

http://jim-murray.ca/shows.html

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

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 on 8 Jul, 2008 wrote:

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 on 10 Jul, 2008 wrote:

great.
James Breen on 10 Jul, 2008 wrote:

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 on 13 Jul, 2008 wrote:

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 on 13 Jul, 2008 wrote:

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 on 15 Jul, 2008 wrote:

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 on 17 Jul, 2008 wrote:

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

Clean implementation too!
Toxane on 20 Jul, 2008 wrote:

Thanks Alen, very nice.
Em on 21 Jul, 2008 wrote:

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 on 23 Jul, 2008 wrote:

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 on 23 Jul, 2008 wrote:

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

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

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 on 27 Jul, 2008 wrote:

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

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 on 30 Jul, 2008 wrote:

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 on 31 Jul, 2008 wrote:

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

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

Keep the good work
moshe on 6 Aug, 2008 wrote:

hey

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

thanks!
josh on 8 Aug, 2008 wrote:

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 on 8 Aug, 2008 wrote:

thanks you very much
sjl on 11 Aug, 2008 wrote:

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 on 12 Aug, 2008 wrote:

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 on 12 Aug, 2008 wrote:

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 on 12 Aug, 2008 wrote:

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

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 on 18 Aug, 2008 wrote:

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 on 19 Aug, 2008 wrote:

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 on 21 Aug, 2008 wrote:

Thanks Alen for the simplicity!
Eddie on 22 Aug, 2008 wrote:

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 on 24 Aug, 2008 wrote:

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 on 26 Aug, 2008 wrote:

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 on 4 Sep, 2008 wrote:

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

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 on 17 Sep, 2008 wrote:

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 on 19 Sep, 2008 wrote:

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 on 25 Sep, 2008 wrote:

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 on 12 Oct, 2008 wrote:

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 on 17 Oct, 2008 wrote:

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

Alexandre
Mark on 20 Oct, 2008 wrote:

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 on 20 Oct, 2008 wrote:

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 on 2 Dec, 2008 wrote:

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

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 on 9 Dec, 2008 wrote:

Example 3 will not work.

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

any ideas
Webagentur on 2 Jan, 2009 wrote:

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

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

Brilliant ! Thanks !!!
vuelos on 14 Jan, 2009 wrote:

Thanks !!!
Emanuelle on 14 Jan, 2009 wrote:

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 on 21 Jan, 2009 wrote:

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 on 22 Jan, 2009 wrote:

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 on 23 Jan, 2009 wrote:

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 on 23 Jan, 2009 wrote:

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 on 26 Jan, 2009 wrote:

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

Genius!

Just what I was looking for!

Thanks :)
fesh on 27 Jan, 2009 wrote:

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

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 on 5 Feb, 2009 wrote:

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 on 7 Feb, 2009 wrote:

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

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

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 on 22 Feb, 2009 wrote:

Great script! Thank you!
karacabey on 22 Feb, 2009 wrote:

nice work :) thanx
Fedeweb on 25 Feb, 2009 wrote:

Hi! Great work!

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

Great script!
Thanks
Tobias on 26 Feb, 2009 wrote:

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 on 28 Feb, 2009 wrote:

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 on 2 Mar, 2009 wrote:

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

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

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 on 9 Mar, 2009 wrote:

Nice tooltip! tnx
Anton on 11 Mar, 2009 wrote:

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 on 11 Mar, 2009 wrote:

Thanks, very useful;
Sfondi on 16 Mar, 2009 wrote:

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

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 on 18 Mar, 2009 wrote:

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 on 24 Mar, 2009 wrote:

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

thank's
web design norwich on 31 Mar, 2009 wrote:

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

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

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 on 2 Apr, 2009 wrote:

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

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 on 8 Apr, 2009 wrote:

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

Good Job ,well done
peter on 17 Apr, 2009 wrote:

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 on 19 Apr, 2009 wrote:

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

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 on 23 Apr, 2009 wrote:

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

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 on 28 Apr, 2009 wrote:

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

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

Thank You
Aashish Singh on 1 May, 2009 wrote:

Its Great
R Valdez on 1 May, 2009 wrote:

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 on 4 May, 2009 wrote:

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

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

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

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

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

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 on 12 May, 2009 wrote:

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 on 14 May, 2009 wrote:

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. on 16 May, 2009 wrote:

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 on 19 May, 2009 wrote:

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

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

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 on 22 May, 2009 wrote:

So nice explanation....
keep going...
Tim on 23 May, 2009 wrote:

nice tip, thanks
Tim on 24 May, 2009 wrote:

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 on 27 May, 2009 wrote:

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 on 27 May, 2009 wrote:

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 on 27 May, 2009 wrote:

@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 on 28 May, 2009 wrote:

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 on 28 May, 2009 wrote:

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

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

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 on 29 May, 2009 wrote:

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 on 1 Jun, 2009 wrote:

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 on 3 Jun, 2009 wrote:

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 on 3 Jun, 2009 wrote:

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 on 3 Jun, 2009 wrote:

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 on 6 Jun, 2009 wrote:

Hi,

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

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 on 15 Jun, 2009 wrote:

Cool, thanks for this.
yans on 15 Jun, 2009 wrote:

Finaly I found script that simple and great ..

matur thankyou maz ....
webmas on 15 Jun, 2009 wrote:

cool...!!!
wptidbits on 16 Jun, 2009 wrote:

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

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 on 20 Jun, 2009 wrote:

Great collection, thanks for sharing!
JC on 23 Jun, 2009 wrote:

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

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 on 28 Jun, 2009 wrote:

Thank You for making my life easier =)

Sorry, further comments are disabled for this post.

Need help with your website?
Hire a CSS/JavaScript expert!

Hey, you are not logged in!
Apply for a membership or login here.

Want to join?

If you wish to contribute with your own articles, updates or gallery entries you can apply for a membership and even become our editor.

Apply here

Become a friend

Css Globe