posted on:May 8, 2008

Easiest Tooltip and Image Preview Using jQuery


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

Enjoyed the article?

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

DeliciousStumbleUpon RedditSubscribe

Comments (170 Comments)

  1. David Appleyard
    May 8, 2008

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

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

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

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

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

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

    Plug and play!
  8. Josh Darville
    May 10, 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
  9. Subash
    May 11, 2008

    A CSS freak just got new ticks up his sleeves ;) Thanks Alen.
  10. webpixelkonsum
    May 11, 2008

    My favorit is example three. Thank you for your nice work. Ralph
  11. AndreiZ
    May 11, 2008

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

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

    Excellent article! Good samples.
  14. Juan
    May 14, 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?
  15. paul
    May 16, 2008

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

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

    Example 2 is great idea.
  18. payastr
    May 22, 2008

    nice system. thanks
  19. Andrew Cornett
    May 22, 2008

    Shoot. Is there a good example using Prototyle/Scriptaculous?
  20. Vlad
    May 26, 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
  21. evodesign
    May 28, 2008

    This is really nice. Thanks
  22. limitless86
    May 29, 2008

    This is fantastic, finally i can do away with all those over branded pre written solutions, much appreciated!
  23. Masey
    May 29, 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.
  24. intelligenc
    June 1, 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.
  25. Charles
    June 3, 2008

    Hi, Is there a way to simply show the content of a hidden div in this tooltip ? Thank you Charles
  26. Cameron
    June 9, 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
  27. Dalain
    June 10, 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.
  28. Jonathan Concepcion
    June 14, 2008

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

    I come from China,you are so great! Nice code!I like it very much. Sorry for my poor English .
  30. Alex
    June 19, 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!!
  31. Dave
    June 20, 2008

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

    WoW! i like it!
  33. Olivia Bell
    June 21, 2008

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

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

    Thanks a million u just added to a life greeeeeeeeeee
  36. Albano
    June 24, 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.
  37. Fred Riley
    June 27, 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
  38. Umer Tahir
    July 4, 2008

    Check out these tool-tips: http://jim-murray.ca/shows.html Just hover over some of the underlined shows.
  39. Enrique Espinosa
    July 8, 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.
  40. LJ
    July 8, 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!
  41. cyberbuff
    July 10, 2008

    great.
  42. James Breen
    July 10, 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
  43. Mark Abucayon
    July 13, 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
  44. gnysek
    July 13, 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!
  45. Alex
    July 15, 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?
  46. People Search Dude
    July 17, 2008

    Sweet! Been searching for something like this! Saves me from having to figure things out and code by hand. Clean implementation too!
  47. Toxane
    July 20, 2008

    Thanks Alen, very nice.
  48. Em
    July 21, 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.
  49. steve
    July 23, 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.
  50. steve
    July 23, 2008

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

    WoW! Thanks Alen for you great and simple wok on "The Simplest jQuery Tool tip Ever"
  52. mark
    July 27, 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!!!
  53. Firebubble Design
    July 27, 2008

    Thanks for the cool javascripts! The website preview script is pretty neat.
  54. Sander Houttekier
    July 28, 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?
  55. josef
    July 30, 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!
  56. Website Designer Perth
    July 31, 2008

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

    Real nice my friend. Many tks for this must :) Keep the good work
  58. moshe
    August 6, 2008

    hey great script has anyone managed to solve the issue that mark mentioned above - that the tooltip sometimes appears off screen>? thanks!
  59. josh
    August 8, 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.
  60. Fiyat
    August 8, 2008

    thanks you very much
  61. sjl
    August 11, 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.
  62. rob
    August 12, 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.
  63. disenando
    August 12, 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.
  64. Dave
    August 12, 2008

    Very nice, Alen! You just saved my butt ;-)
  65. Hasan Tayyar BEÅžIK
    August 14, 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!="")
  66. egypt
    August 18, 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!
  67. coderbari
    August 19, 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.
  68. Poppy
    August 21, 2008

    Thanks Alen for the simplicity!
  69. Eddie
    August 22, 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 :)
  70. BLACK SHARK MEDIA
    August 24, 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.
  71. Günther
    August 26, 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!
  72. web design los angeles
    September 4, 2008

    Now that's a time saver! Thanks for doing such a great job.
  73. Anthony
    September 16, 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.
  74. James Wigger
    September 17, 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
  75. mastr3s
    September 19, 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
  76. Andrew
    September 25, 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
  77. gnaffetto
    October 12, 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
  78. Alexandre
    October 17, 2008

    Thanks for this great piece of code, this is really the easiest tooltip example. Alexandre
  79. Mark
    October 20, 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
  80. Bruno
    October 20, 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");
  81. weblover
    December 2, 2008

    Thank you very much for this clear and very useful examples of jtip.
  82. Mahmoud M. Abdel-Fattah
    December 2, 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/
  83. scott
    December 9, 2008

    Example 3 will not work. Say theres a broken link in main.js " + this.rel + " any ideas
  84. Webagentur
    January 2, 2009

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

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

    Brilliant ! Thanks !!!
  87. vuelos
    January 14, 2009

    Thanks !!!
  88. Emanuelle
    January 14, 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?
  89. Tau
    January 21, 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?
  90. xaer8
    January 22, 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.
  91. Hiral Thaker
    January 23, 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
  92. Chris Barnett
    January 23, 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!
  93. Tibor
    January 26, 2009

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

    Genius! Just what I was looking for! Thanks :)
  95. fesh
    January 27, 2009

    Great This is what i need! I just need some little modification. thanks!
  96. Manny Calavera
    February 3, 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"); }); };
  97. Hiral Thaker
    February 5, 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
  98. Milind Ghatkamble
    February 7, 2009

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

    Third script is amazing. I was just searching for something like it. Thank you a lot for sharing it!
  100. Edward
    February 15, 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
  101. modoko
    February 22, 2009

    Great script! Thank you!
  102. karacabey
    February 22, 2009

    nice work :) thanx
  103. Fedeweb
    February 25, 2009

    Hi! Great work! one question: how can i use a tooltip with different offset in the same page?
  104. Artevideo
    February 26, 2009

    Great script! Thanks
  105. Tobias
    February 26, 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
  106. Jim
    February 28, 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.
  107. Ischia
    March 2, 2009

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

    Thank you very much for this, i'm using this over at my portfolio.
  109. peter
    March 5, 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!
  110. MegaFill
    March 9, 2009

    Nice tooltip! tnx
  111. Anton
    March 11, 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
  112. Rafael N Samapio
    March 11, 2009

    Thanks, very useful;
  113. Sfondi
    March 16, 2009

    Thanks a lot for this tooltip code!
  114. Chanie
    March 16, 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.
  115. John
    March 18, 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
  116. zahid
    March 24, 2009

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

    thank's
  118. web design norwich
    March 31, 2009

    This is a great way of increasing website usability
  119. GadElKareem
    April 1, 2009

    can you explain how to do that using the new method "live"
  120. GadElKareem
    April 1, 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
  121. Steven
    April 2, 2009

    This tooltip is not working in Opera 9.51 :(
  122. joe
    April 7, 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
  123. gino
    April 8, 2009

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

    Good Job ,well done
  125. peter
    April 17, 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.
  126. Ryan
    April 19, 2009

    A simple solution that seems to be 'over-engineered' elsewhere, lightweight and just what I needed, thanks.
  127. Emil
    April 19, 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.
  128. ArthasMX
    April 23, 2009

    wow! so easy :D
  129. Luca Barbonaglia
    April 24, 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
  130. robert
    April 28, 2009

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

    JQuery & People like you make life easy & exciting for open source developers. Thank You
  132. Aashish Singh
    May 1, 2009

    Its Great
  133. R Valdez
    May 1, 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.
  134. zhuge
    May 4, 2009

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

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

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

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

    Images are showing up behind other div tags, how do I fix it? thank u
  139. me , myself and i
    May 12, 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
  140. Derek
    May 12, 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.
  141. Darthslade
    May 14, 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?
  142. P.S.
    May 16, 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 :)
  143. Dale Larsen
    May 19, 2009

    Is there a license for using this script on your own page? Which license is it filed under?
  144. TheRose
    May 21, 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.
  145. XiShaN
    May 22, 2009

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

    nice tip, thanks
  147. Tim
    May 24, 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>
  148. PiYU
    May 27, 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!
  149. Sam
    May 27, 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});
  150. Sam
    May 27, 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
  151. Dain
    May 28, 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(); });
  152. Dain
    May 28, 2009

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

    Very usefull and easy to use, Congratulations, great job!!!!
  154. asad
    May 29, 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
  155. Thomas Svensson
    May 29, 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?
  156. SLA80
    June 1, 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.
  157. Marko Vierimaa
    June 3, 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"); });
  158. Eddie
    June 3, 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"); } },
  159. Eddie
    June 3, 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.
  160. Conrad
    June 6, 2009

    Hi, Great little script. Was wondering if it is possible to add a graceful fadeIn/fadeOut effect when hovering over a link?
  161. Mottie
    June 11, 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
  162. Krishan Rodrigo
    June 15, 2009

    Cool, thanks for this.
  163. yans
    June 15, 2009

    Finaly I found script that simple and great .. matur thankyou maz ....
  164. webmas
    June 15, 2009

    cool...!!!
  165. wptidbits
    June 16, 2009

    Great tutorial here! Never thought it would be that easy. Understandable and user-friendly tips. Hope to see more post like this.
  166. Katherine
    June 17, 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!
  167. Muhammad Usman Arshad
    June 20, 2009

    Great collection, thanks for sharing!
  168. JC
    June 23, 2009

    Has anyone managed to get the tooltip to work in any IE yet?
  169. Rúbel Mujica
    June 25, 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!
  170. Allen
    June 28, 2009

    Thank You for making my life easier =)

Sorry, the comment form is closed at this time.