jQuery plugin: Tooltip

The jQuery Tooltip plugin let’s you transform native tooltip’s into customizable overlays. You can adjust their content, position and appearance.

Since this plugin wasn’t updated in a long time, I recommend the jQuery UI Tooltip widget. I wrote that, too.

Current version: 1.3
Compressed filesize: 3910 bytes
License: MIT/GPL






  • optional: bgiframe plugin to fix select-problems in IE, just include to apply to tooltip


  • Please post questions to the official Using jQuery Plugins Forum, tagging your question with (at least) “tooltip”. Keep your question short and succinct and provide code when possible; a testpage makes it much more likely that you get an useful answer in no time.
  • Please post bug reports and other contributions (enhancements, features) to the plugins.jQuery.com bug tracker


$ USDDonate€ EURDonate

No more comments.
  1. 7. November 2006 |22:03

    ohh.. goodie, grate . thanks, should work in overflow div , scroll div? i hope

  2. gsarwohadi
    9. November 2006 |08:46

    If i want to display images or add HTML code to the tooltip, how should i accomplish this?

    the tooltip is awesome, btw. Thanks!

  3. 9. November 2006 |09:40

    The idea is interesting, but currently unsupported. If you need the same static content added for every tooltip, you could edit this line:

    helper = $('<div id="tooltip"><h3></h3><p></p></div>')

    Otherwise, I’d recommend Dave Cohen’s hovertips, they support just what you need, though they are way more obtrusive.

  4. Matt Mitchell
    13. November 2006 |19:16

    If you want to add ajax/images… a little HACK modification here…


    1. add a new default “plugin.settings” key called “loadURL” – at bottom of file
    2. right after the line “href = (source.attr(‘href’) || source.attr(‘src’));” – paste this code:

    if( settings.loadURL && this.nodeType == 1 ) {
    	if( href.indexOf('.jpg') > 0 || href.indexOf('.jpeg') > 0 || href.indexOf('.gif') > 0 ) {
    		var image = new Image();
    		image.src = href;
    	} else {


    Create an “a” tag with “title” attribute and “href” to a page or an image; if it is an image, an image element will be created automagically

    setup your javascript:

    $(function() {
    		showURL: false,
    		loadURL: true

    This will load the contents of the href into the tooltip container!

    Any comments? I’m about ready to use this in a site today! If this could be implemented into the source : ) … I could add the loading image code also.

  5. 14. November 2006 |12:41

    Hi Matt,

    your modification is interesting, but actually breaks the unobtrusive concept of this tooltip implementation.

    Anyway, I’ll give it a try.

    Until then, some small suggestions: Use a regular expression to check the href value, eg. /(jpg|jpeg|gif|png)$/.test(href). This check if href ends with jpg, jpeg, gif or png.

  6. 16. November 2006 |15:57

    Great tooltip plugin! So far, your plugin respects the boundaries of the screen better than any other tooltip plugin I’ve seen…save for wz_tooltip (http://walterzorn.com/tooltip/tooltip_e.htm). I’m a fan of wz_tooltip as it appropriately respects the side of the screen without resizing…it pushes the tooltip rather than doing a resize.

    Any plans to do such a thing with yours?

  7. 16. November 2006 |16:35

    Hi Matt (yet another!

    Yes, that is still on the TODO list.

  8. 17. November 2006 |14:05

    Hi. Was wondering if anyone had found any issues with the tooltips appearing behind select elements, and if so, how to solve?

  9. 17. November 2006 |14:35

    That problem occurs quite often in IE. It can be solved by adding an invisible IFrame behind the tooltip.

    There is a plugin available that solves this. The website is gone, but the source can be found in the plugin repository:

    Try to apply that via:

  10. 17. November 2006 |17:42

    Awesome – you are a star :) Thanks for a great tool and your help!

  11. jeff
    28. November 2006 |02:24

    Nice plugin. I’ve run into one issue with Firefox 1.5: if my page mostly fills the window (no scroll bars visible) and I attach a big tooltip to an element near the bottom of the page, then the plugin causes the window to “bounce” because it adds scroll bars when displaying the tooltip. The “bounce” is ugly, but the bigger problem is that the tooltip can’t be completely read because part of it is off the screen.

    Any ideas how to fix this?

  12. 28. November 2006 |08:05

    Hey Jeff,

    yes, that is a know issue and requires some additional computing of the tooltip position. Your request reminds me that I should really try to implement that.

  13. jeff
    29. November 2006 |02:37

    I look forward to seeing this fixed!

  14. 29. November 2006 |16:30

    Hi Jeff,

    the tooltip now includes a fix for that issue. It checks it’s position and moves up and/or left when necessary. Check out the updated demo to see it in action.

  15. jeff
    30. November 2006 |03:06

    Hi Jörn,
    The demo works fine but my page still has the same problem. I took your demo and kept hacking at it until I found the reason. The demo changes the global settings for track and delay. If you remove those settings, then the demo will show the same problem.

    I would rather not change the defaults for track and delay. Is this possible?

  16. Paul
    30. November 2006 |16:39

    Excellent work as usual Jörn! The updates are great. I’ll be adding this to a project very soon. Thanks for your work!!

  17. 6. December 2006 |18:23

    Excellent plugin which we hope to use on a client site at work :)

    Just one question though – is it possible to make the default position of the tooltip be upper right instead of lower right?

  18. pingback

    [...] If you are using my tooltip plugin: I updated it for jQuery 1.0.4. It’s now a bit more stable and also available as compressed version. If you haven’t already I recommend you update. The file header contains now some versioning information, so you always know which version is the latest and greatest. [...]

  19. 28. December 2006 |19:45

    Its great plugin!!
    But sometimes, I need dynamic tool tip message.

    so in the begining of the function “save()”, I add little hack.

    if( settings.injectFunc ){
     oldTitle = title = settings.injectFunc(source);
    } else {
      oldTitle = title = source.attr('title');


    so now tooltip shows result of “myFunction” method, if there is injectFunc parameter. Easy to add image, html, and embed flash inside tooltip.

    anyway thanks for your cool tooltip!

  20. 28. December 2006 |23:25

    That is an intersting approach. It wouldn’t work if the injectFunction loaded content via AJAX, because you need to work with callbacks. Maybe I add something that would work that way.

  21. Denise
    3. January 2007 |15:08

    I have 2 classes: pretty and pretty1. I’ve added two extra classes to them called fancy and fancy1. These extra classes have different background images. In IE6, it is able to display the the background image defined in class fancy but when I rolled over the text that is defined using pretty1 (with extra class fancy1), it displayed the default tooltip background (which is just a normal rectangle). Why is this so? It is working in Firefox but not in IE when I defined two different classes with different background images.

  22. Denise
    4. January 2007 |00:30

    Here’s the url to my problem posted yesterday:


  23. 4. January 2007 |23:59

    I’m still not sure what is causing the problem, but it is solved in the latest jQuery revision. Until 1.1 is ready, which gets released on 14th Januaray, you can find the latest revision here: http://joern.jquery.com/dist/

  24. Denise
    8. January 2007 |07:06

    Hi Jörn,

    I’m just wondering if jquery works well with prototype script? I’ve tried using a prototype scripted scrollbar with your jquery tooltip, the tooltip didn’t work.

  25. 8. January 2007 |18:18

    There is a naming conflict concerning the $ object. But, at least in theory, that shouldn’t affect the tooltip plugin.

    jQuery 1.1 will provide a noConflict() method that intends to solve the naming issue. Could you help us with some testing and provide a testpage for the scenario you described?

  26. Denise
    9. January 2007 |00:27

    Hi Jörn,

    Here’s the example page http://www.vi.com.au/denise_test/test.html

    I’ve downloaded the scroller from this site: http://wailqill.com/projects/scroller/

    As you can see from the test page, I’m able to scroll through the text with the scroller but when I mouse over the links such as “Lorem Ipsum”, the tooltip didn’t appear.

    Hope this helps in your testing.

  27. 9. January 2007 |19:28

    It works fine when changing $ to jQuery in the jQuery related code. The plugin itself already avoids using $, by wrapping it’s code into this construct:

    (function($) {
      // other code

    More info about that pattern.

    So either wrap the code with the $(“.pretty”).Tooltip(…) code in that construct, or rename $ to jQuery there.

  28. Denise
    10. January 2007 |01:31

    Hi Jörn,

    Are you able to send me the working scroller and the tooltip to me? I didn’t seem to get it to work even after I’ve changed “$” to “jQuery”. I might have misunderstood some of your points.


  29. 10. January 2007 |19:20

    Try to replace the tooltip code with this:

    jQuery(function() {
    // modify global settings
    jQuery.extend(jQuery.fn.Tooltip.defaults, {
    	track: true,
    	delay: 0,
    	showURL: false,
    	showBody: " - ",
    	fixPNG: true
    	extraClass: "fancy"
    	extraClass: "fancy1"
  30. 15. January 2007 |18:42

    Hi, is there a way to get it to fade in and out :)

    – Lars

  31. 15. January 2007 |19:20

    Hi Lars,

    while jQuery supports fade animations, I had to remove them. The current animation system queues animations and doesn’t provide a way to unqueue them manually. That caused the tooltip to fade in and out several times when some elements were hovered in a row, which is quite ugly and annoying.

    As soons as jQuery supports unqueuing, I add support for fading to the tooltip.

  32. Paul
    19. January 2007 |22:26

    Hi Jörn-

    I like this plugin a lot. Is it supposed to work with jQuery 1.1? I just upgraded from 1.0.4 to 1.1 today and the tooltips stopped working.

    I should note that I am renaming the $ function JQ, in order to avoid a conflict with Prototype. Of course I also had to change your script to use JQ instead of $, but it was doing fine until I uploaded the new jQuery file.

    Let me know if there is something else I need to do to get your script working with jQuery 1.1.


  33. 20. January 2007 |11:35

    Hi Paul,

    I removed the first link to the plugin source. The latest version is in the jQuery subversion repository. If that version doesn’t work for you, try it with the latest jQuery build: http://joern.jquery.com/dist/

    There are some bugs in jQuery 1.1 that affected the tooltip plugin, but I worked around them until 1.1.1 is released.

  34. pingback

    [...] Tooltip [...]

  35. 14. February 2007 |12:09

    Hi there!
    I found a little bug in the current version – if there are other elements on the page where you want to use the Tooltip plugin all of them are updated with the title of the current link. Try it :)

    So I had to make the following simple modification starting on line 106:

    // save references to title and url elements
    tTitle = $(‘#tooltip h3′, helper);
    tBody = $(‘#tooltip p.body’, helper);
    tUrl = $(‘#tooltip p.url’, helper);

    The #tooltip in all lines ensures only the right h3, p.body and p.url elements are stored.

    Unfortunately the helper parameter should achieve that but for some reason this does not work…

    Please integrate this into the release, thanks.

  36. 14. February 2007 |21:33

    @Mike: Could you post an example page for that problem?

  37. Eli
    15. February 2007 |22:06

    Hi Jörn,
    Great plug-in.

    I’ve had very good luck getting it to work for objects that exist at load time. But I’ve yet to figure out how to attach Tooltip to an object that is created on the fly using jQuery.

    During document load, I’m using:

    $(“.paged tr div”).Tooltip({
    track: true,
    delay: 0,
    showURL: false

    While creating an object, I’m trying:

    $(‘#bucket tr:last div’).Tooltip({
    track: true,
    delay: 0,
    showURL: false

    No go.

    I’m sure I’m missing something obvious.
    I’m pretty new to jQuery, although I’m pretty Javascript savvy.

    Thank you for an assistance you can provide.

  38. SA
    26. February 2007 |14:44


    This plugin has been a great addition to my web pages.

    However, I have one problem (hopefully it’s a small one). I’ve recently started using it on a page that is displayed within an IFRAME, and for some reason the top of the tooltip is sometimes cut.

    I wouldn’t call myself a JS expert so any help would be most appreciated.


  39. 26. February 2007 |19:35

    @SA: Could you post an example page? That would help a lot helping you.

  40. Svilen
    28. February 2007 |17:49

    Hello, this is really nice feature. I was trying to make a delay for hiding the tooltip after mouse goes out of the link. This will be the only way to click over a link in the tooltip. I made some changes in hide method but the tooltip crashes while showing the next tooltip before the first one is hide.

    Can someone help here for this option in the plugin.

  41. 28. February 2007 |19:35

    @Svilen: I’ll try to add an option that changes the hide behaviour of the tooltip, allowing you to move over the tooltip without hiding it when leaving the tooltipped element.

  42. Ryno
    7. March 2007 |04:32

    Just tried to get your tooltip plugin to work on an area element of an image map and it does not stop the title attribute displaying as normal in IE 6 SP2.

    This is also the case with the demo’s on your site.

    Do you have a fix?

  43. 8. March 2007 |23:42

    On other elements the default tooltip behaviour is prevented by removing the title attribute while displaying the custom tooltip. I need to check why that doesn’t work on image maps in IE6. Thanks for reporting.

  44. 15. March 2007 |23:29

    I was just about to submit a big fix but I’m seeing that Mike has submitted the same issue with the exact same solution I was going to post.

    Line 106:

    // save references to title and url elements
    tTitle = $(’h3′, helper);
    tBody = $(’p.body’, helper);
    tUrl = $(’p.url’, helper);

    Should be:

    // save references to title and url elements
    tTitle = $(’#tooltip h3′, helper);
    tBody = $(’#tooltip p.body’, helper);
    tUrl = $(’#tooltip p.url’, helper);

    The current code is keeping a reference to any h3 in the DOM, wheras we only want to keep a reference to #tooltip’s h3.

  45. SA
    16. March 2007 |14:47

    Unfortunately I can’t post an example page as it’s for an internal system I’m working on.

    The problem occurs when displaying the tooltip within a frameset. It could be that it is positioning the tooltip dependent on the window height rather than the frame height?? Therefore, if there is a frame above, the top of the tooltip will (sometimes) be cut.

    Hope that made sense..

  46. SA
    16. March 2007 |14:58

    On your demo page, if you resize the window to a height of around 250px, then try the 2nd link under “Tooltip width auto width”. When hovering over the left-hand side of the link it works fine. However, hovering over the right-hand side draws the tooltip with the top cut off.

    This is a similar problem to the one I’m experiencing. So probably nothing to do with frames at all.

  47. 16. March 2007 |18:06

    @John: That was reported before, true, but I still don’t see the issue. The #tooltip context is provided by passing in the “helper” reference. That may have been broken in some jQuery version, but works fine with jQuery 1.1.2+.

    @SA: The tooltip plugin moves to tooltip to the left or top when there isn’t enough space left on the right or bottom. When there isn’t enough space to display it anywhere, how could it be fixed? Maybe you can extract the interesting part of your system into its own demo page, otherwise I can hardly help you.

  48. SA
    19. March 2007 |15:52

    Ok I will try to create a demonstration page this week. Although there is really no need as the same thing happens on http://jquery.bassistance.de/tooltip/ with links under “Tooltip width auto width”.

    The positioning of the tooltip is fine. It is the width and height of the tooltip that cause the problem. For example, when the link is positioned to the right of the page (Tooltip width auto width), and i hover over the right-hand side of the link, the tooltip is very narrow.

    I know I could set a fixed-width but this is not an ideal solution for me. Could you point me in the right direction to find the lines in your code that draw the width and height of the tooltip?

    I commend the great job you have done, and appreciate your kind help.

    Kind regards

  49. 19. March 2007 |20:18

    Ok, I think I understand now what your issue is. The problem: I don’t see any fixed size at that point, I just let the browser auto-size the element according to its content. That doesn’t work so very well in these corner-situations. Maybe this info helps you in some way.

    In any case, I have to investigate if it is possible to modify the tooltip placement in a way that allows the browser to make the tooltip less narrow.

  50. SA
    20. March 2007 |15:23

    Thanks Jorn. That sounds right. In my situation I have upto 500 chars being displayed in the tooltip and, since the width is very narrow, it goes off the top of the page.

    Thanks for your help. Keep up the good work.

  51. 24. March 2007 |19:46


    I am having issues with the tooltip and the track: true parameter. It seems when you are hovering the tooltip element w/ track:true, the tooltip pops around all over the place and changes its orientation to the mouse. i.e. left, right, top in orientation to the cursor.

    I notice that this also is the case on this page. Try hovering these links:

    Download Tooltip Source
    Compressed source from plugin repository
    Tooltip demo

    For no reason at all, the tip changes orientation.

  52. 25. March 2007 |22:05

    @Rogie: Yeah, something went awfully wrong there. I have to investigate that, thanks for reporting.

  53. Oddish
    27. March 2007 |08:38

    Doesn’t the W3C spec say that you shouldn’t have more than one element with the same id? Then, maybe you should use .tooltip instead of #tooltip for the CSS?

  54. 27. March 2007 |19:28

    There is no more then one element with the id “tooltip”. I create that element once and use it for all tooltips, simply replacing the content each time. And adding additional classes when needed.

    Of course there may be a bug I haven’t seen yet, let me know if you spotted one that allows to create more then one element with that id.

  55. 30. March 2007 |01:15

    have you heard of any trouble with IE7? I have a feeling it’s somewhere else in my code but removing this line from my js file stops IE7 from crashing on page load.

    $(“#donor_results th a”).Tooltip({track: true, showURL: false});

    I wish I could share the url but it’s in dev at the moment. Again, it’s probably my code but I thought I’d ask, just in case.


  56. 30. March 2007 |01:44

    It was crashing ie6 as well.

    Why does microsoft have to make a browser? :(

  57. 5. April 2007 |10:31

    i developing a Drupal module based on your plugin. is it possibile to make working tips only for external links?

    There’s a script that do it.

  58. 5. April 2007 |16:45

    @Psicomante: I’ll take a look at that module, and try to add support for external links.

  59. 7. April 2007 |17:19

    My module is http://drupal.org/project/jtooltips

    There is a problem, sometimes there’s a strange critical error in IE (“Impossible viewing the URL page” or similar), that make impossible to view the page. FF, obviously don’t have incompatibilities.

  60. 8. April 2007 |10:28

    That error occurs in IE mostly when trying to access DOM elements before they are loaded. Check if your DOM-ready events.

  61. 11. April 2007 |00:21

    I’ve having an issue where tooltips for content near the top of the div/page, are being rendered off screen in Firefox. Unfortunately, it works fine in IE6, because it renders the tooltips to the lower right of the mouse pointer, rather than the top right.

    I know you test for bottom/right space, but is there also a way to also test for available space above the mouse pointer, or better yet, just always position the tooltips in Firefox to the lower right?

  62. 11. April 2007 |14:51

    @John: There is a bug causing this behaviour. I’ll try to fix that as soon as possible.

  63. 11. April 2007 |18:48

    Thanks Jörn, you can see the behaviour here:

    If you mouse over the top left POI, most of the tooltip is off screen, and unfortunately I can’t move the image down the page any, since it’s included in a iframe elsewhere.

  64. Josh
    12. April 2007 |21:47

    Hey Jörn, love your plugin. We’re having a problem though with a project we’re working on.

    We’re building a site using tons of ajax, and most of our hyper links don’t have an actual address. This seems to be causing a problem where the tooltip does not disappear when the link is clicked. It shows up fine on hover, and when the mouse is moved away from the link, as long as the link is not clicked.

    Like many folks on here, I’m sorry but I can’t show you an actual example since our project is not open to the public right now, but any help you could give would be greatly appreciated.

    Here is an example of a link that is causing problems.

    Anchor Text

  65. 12. April 2007 |23:52

    @John: Thanks, I’ll have a look.

    @Josh: The trick is to extract the interesting part out of your project into a simple page. Sometimes the problem can be solved simply by doing that.
    Without an example I can only guess, and so far I have no idea what the issue could be.
    I have a proposal for something that you could try. When your site is heavily-ajax-driven and you’ve got a lot of links that aren’t really links but just places where the user clicks on to start something: Do you really need those links at all? Wouldn’t a span or whatever with a hover class and the same click event do the trick? The benefit: You don’t have to worry about a fake-href attribute at all. That may solve the problem with the tooltip.

  66. OSCAR
    24. April 2007 |10:55

    Add tooltip to validation.

    It is posible to add a tooltip in order toshow the “error message” of a validation.

    My Problem:
    I have a form very big for that reason I only can put a “*” if a input validation fails. I would like to add a tooltip with the info about the error.

    I don’t know if I could integrate your tooltip & validation plugins.

    Thanks in advanced.

  67. 24. April 2007 |17:27

    @Oscar: Provide the showErrors option. Put only the star beneath the field and the error message inside the title attribute of the input. Modify the tooltip plugin: The check if an element has a title attribute has to be done when the tooltip is displayed, not when applying the plugin.

    I’ll try to provide an example with the necessary tooltip modifications, but it may take a while.

  68. OSCAR
    24. April 2007 |18:16

    Great!!! I will try to do it.

  69. OSCAR
    25. April 2007 |09:34

    Maybe could be nice to provide tootip message optin into validation with a new param:


    Ii will be nice in order to mantain separatlly view & controller, if we put tooltip text into the title we are mixing view & controller. It is hçjust an idea!

  70. 25. April 2007 |18:46

    @Oscar: Adding a tooltip option to validation is an interesting approach, I’ll check that.
    I don’t see an issue with putting messages into the title attribute.

  71. 2. May 2007 |17:15

    Great plugin – just what I was after.
    Has anyone else had the bug where the tooltip (for a particular link) displays once, but not if you try and hover over it for a 2nd (or 3rd etc) time?

  72. 2. May 2007 |21:45

    @Tim: I think I’ve seen that, too. I’m working on a new release with some interesting new features, I hope the issue you experience is gone in that new version. You can preview the latest revision if you like.

  73. 3. May 2007 |12:50

    Cheers for that. No, same problem with the revised script.
    This is the neatest tooltip solution I’ve seen so far so I’ll persevere with it for now.
    But if anyone comes up with a work around for my problem (tooltip only showing once per element) pls let me know about it!

  74. 3. May 2007 |17:15

    @Tim: It’s easier to find and solve issues with any kind of test or example. I’m sure we can solve that if you can provide such a demo. If necessary, try to extract the relevants parts from your application.

    Glad to hear that you like the plugin.

  75. 9. May 2007 |16:01

    Hey thanks for the offer and sorry for my slow reply.

    Here is an example page: http://test2.futurelab.org.uk/tests/calendar/

    I’ve pared it right down so there’s now other competing JavaScript that might be causing the problem.

    You might also notice that my hack for getting the tooltip to appear *top* left is not very smooth.

    Many thanks,

  76. Crayon
    14. May 2007 |15:33

    With Internet Explorer when we use Tooltip with Image Map both tooltip appears. The normal one from IE and the nice one from jQuery. Is there a quick way to correct that problem.


  77. 15. May 2007 |19:06

    @Crayon: I haven’t yet figured out how to properly remove the default tooltip on image maps. Simply removing the title attribute doesn’t do the trick. I guess there is yet again some proprietary trick to solve it, but I haven’t found it yet.

  78. Anh
    16. May 2007 |08:57

    Hi Jörn,
    Could you make more detail tutorial step by step?
    I tried to apply to my page but the tooltips are behind everything and the positions are fixed on the left most of the page.
    Try put the z-index in the css for #tooltip but it’s still the same.
    Thanks a lot!

  79. 16. May 2007 |23:18

    @Anh: The step-by-step tutorial would contain only three steps: Include jquery.js. Include jquery.tooltip.js. Select some elements and apply tooltip plugin:

    jQuery().ready(function() {

    If that doesn’t work, please post a demo page.

  80. Priit
    18. May 2007 |09:16

    Tooltip is displayed only once…

  81. 18. May 2007 |14:38

    Hi all,
    One last try :)
    Anyone got any suggestions for the glitch posted above (http://test2.futurelab.org.uk/tests/calendar/) whereby the tooltip shows only once per item (unless you do a page refresh)?

  82. Priit
    18. May 2007 |15:03

    @Tim actually I have the same issue :(

  83. 20. May 2007 |15:50

    @Tim and Prrit: I haven’t found the source of that issue yet. Any help at debugging is highly appreciated. Just throw on Firebug and add a few console.log(arguments) statements in the code. Once it’s clear what the cause of the issue is, I’m sure I can fix it.

  84. 23. May 2007 |16:49

    @Priit – it’s worth trying the “interface” plugin because this also has a tooltip function which is working quite nicely for me:

    Jorn – I love your plugin but I guess it’s just not the right fit this time :-/

    If I’ve just pointed someone in the direction of the ‘competition’ (if indeed it is competition!) then by all means remove my comment :-)

    Cheers for help.


  85. 23. May 2007 |21:29

    @Tim: Thats ok. The interface tooltip even provides animations, and its the one that I originally started with.

  86. Jochen
    27. May 2007 |17:44

    Very good script! Thanks a lot!
    But it seems to cache the values of the tooltips? If you e.g. change your title attribute with ajax, the old tooltip is still visible, also when you “recall” $(‘a’).Tooltip();
    Or am I wrong?

  87. 28. May 2007 |21:58

    @Jochen: A kind of “caching” is done only when a tooltip is displayed. If you change the title-attribute while no tooltip is displayed, it should work fine.

  88. 30. May 2007 |01:40


    First off, thanks for the wonderful plugin. I’ve been through a ton of tooltip scripts and found I like yours the best and decided to use it.

    So of course, after I decided to use it and threw away all the other scripts I had downloaded I ran into a problem =)

    Only on IE7 (I haven’t tested any other IE versions, but the latest Firefox and Opera work fine).

    When I have an embedded Youtube (have only tested with Youtube so far, but I suspect it might affect other embedded files as well) I get the IE error mentioned above which prevents the page from loading.

    Removing the:
    $(function() { $('a, input, img').Tooltip({ track: true, delay: 500 }); });
    That I am using in the header, prevents the IE problem from occurring but, of course, obviously also precludes the tooltip from working =)

    Any idea what might be causing the error?

    You can see the problem in action with IE 7 at this URL:

    Apologies in advance for wasting your time if this is something stupid that is my own fault. I’m not terribly adept at Javascript yet.


  89. Alex
    30. May 2007 |17:04

    Your plugin causes an IE “Operation Aborted’ error on pages which contain Flash and the element with the tooltip is positioned over the Flash. I don’t see the error in Firefox or on pages where the tooltip element does not float over Flash. The error is caused by a particular DOM code, but note sure why Flash is causing this issue:


  90. Websolute
    31. May 2007 |11:51

    I’ve a problem with a meta tag:

    In firefox all is ok, but Internet Explorer 6 or 7 I found an error and the tooltip doesn’t work anymore.
    Is there a solution for this bug?

    I try with $(this).not(‘[@name'].filter(‘[@title]‘) but I didn’t obtain nothing.

    The real error is in the code line 156.

    The meta tag is:

    [ meta name="title" content="..." ]

  91. 31. May 2007 |13:12

    Moving the $(function() { $(‘a, input, img’).Tooltip({ track: true, delay: 500 }); }); from the header to just above the /body has fixed the IE-flash problem for me.

  92. 31. May 2007 |22:33

    @ttancm: That is still quite weird. But its good that there is a workaround.

    @Alex: Thanks for the report, I haven’t yet tried the combination of the plugin with flash. I’ll investigate the problem.

    @Websolute: I don’t quite get the problem. It seems like I’m missing some context. Could you post a more complete example or even an example page?

  93. 1. June 2007 |03:43

    As I stated above, I’m still pretty much a JS noobie, but from what I was reading elsewhere the problem most likely had something to do with the way IE interprets DOM events, and moving the script to the end of the files made it so that it didn’t touch the DOM until everything was loaded (onload is being used by so many other things I didn’t even want to try).

    I also tried defer=defer but IE just kind of ignored that =P

    Thanks for the great plugin =)

  94. 1. June 2007 |15:08

    I’m having problems with the Tooltips. With firefox it works fine. But with Explorer 6 and 7 it causes a javascript error, and it doesn’t open the title of an object in a div.
    I’ve determined that the problem is caused in some way by the meta tag:

    since it has the word “title” in its name!
    Because if I remove that tag, it works.
    Is there a solution?

  95. Websolute
    1. June 2007 |15:10

    I’m having problems with the Tooltips. With firefox it works fine. But with Explorer 6 and 7 it causes a javascript error, and it doesn’t open the title of an object in a div.
    I’ve determined that the problem is caused in some way by the meta tag:

    since it has the word “title” in its name!
    Because if I remove that tag, it works.
    Is there a solution?

    Here is a link with an example:


  96. Tom
    14. June 2007 |16:39

    Great tooltip and greata work on jQuery in general.

    I am trying to add this tooltip to a page with 1200+ links so I am trying to use event delegation. Here is my code:

    function handler(event) {
    var target = \$(event.target);
    if (target.is(“.tooltip”)) {

    it’s a php page so the ‘\’ escapes the ‘$’

    The problem is that in Firefox and IE the default tooltip appears on initial mouseover. If I mouseover the link a second time the the script then works correctly.

    Here is the page: http://www.lib.byu.edu/cgi-bin/SubsUtility/dbresources_ted.pl

    any help would be greatly appreciated.


  97. 14. June 2007 |17:59

    @Websolute: Sorry for ignoring your post for so long. I now managed to take a look at your demo page. I can’t really see anything wrong with that and I’m not sure to what “meta tag” you are referring. Could you explain that?

    @Tom: Your approach to event delegation doesn’t work out. The tooltip plugin still applies event handlers to the elements you hover, instead of simply showing the tooltip. A true even delegation approach would have to apply a mousemove event handler to your container (table.zebra), checking for hovered targets to show and hide tooltips accordingly. It may be possible to restructure the tooltip plugin for that approach, but its not trivial.

  98. Tom
    15. June 2007 |17:05

    It sounds like you are saying I can’t do event delegation with this script in it’s current state, is that correct? Is it possible to change my method for event delegation to make it work with this script?

  99. 15. June 2007 |17:33

    @Tom: Correct. Its a fundamental different approach.

  100. robert
    20. June 2007 |11:07

    Hi Jörn,

    Nice little add-in. Thanks. One question though: With only one line of text in the tooltip I have one line of space aboev and below the text. How can I make the tooltip box be only as high as needed to show the one line instead of padding it this much?

    Here’s a sample of the css and title tag:

    #tooltip {
    border: 1px solid #CCC;
    background-color: #FFF;
    opacity: 0.90;
    padding: 5px;
    font-family: Arial;
    font-weight: normal;
    font-size: 70%;
    min-width: 90px;
    max-width: 180px;

    Thanks in advance for any help you can offer.


  101. robert
    20. June 2007 |11:19


    Solved it by sniffing around in your css – thanks :-)

    Nice job…


  102. Alexandre
    21. June 2007 |20:43

    Im having the same problem than Websolute, When I put a Meta Tag in the head of document, the IE 6 give a script error. Beside it, the Opera crashs when I over the element thats contain the tooltip.

  103. John
    24. June 2007 |20:08

    Hi, is there a way to have it by the mousepointer?


    as you can see, its ways from the pointer itself.

    cant really sovle this, anyone?

    and do I have to do something special to get it work with both FF and IE?

  104. 24. June 2007 |20:43

    @robert: Cool.

    @Alexandre: Thats not so cool. I’ll try to look into that problem.

    @John: Currently there is no way to customize the positioning via plugins options (what a shame). For a quick workaround you can tweak the positioning in the plugin code, look for this line “left = pos(‘X’) + 15;” and change “+15″ to something more appropiate. For your example try ” – 70″ for left and “+ 5″ for top.

  105. Claudia
    24. June 2007 |23:02

    Hi Joern

    I am not sure whether this helps but I fixed the problem with the visible native tooltips in image maps in IE6 by removing the title attribute already in the tooltip function itself, here the relevant part:

    // save settings into each element
    // TODO: pass settings via event system, not yet possible
    .each(function() {
    this.tSettings = settings;
    this.attribs = {‘oldTitle’ : this.getAttribute(‘title’)};

    Of course you have to adapt the function save() accordingly, but this easily done. I know that it is not very nice to remove the title attributes from all image map areas but it looks like on IE6 there is no other way.
    Note: This was tested with whatever version of jquery.tooltip.js is downloadable from this page.

    I also played around with the version 2.0 (although I haven’t tried any image maps). The problem with the tooltip showing only once can be fixed by removing line 365:
    $(this).unbind(‘click’, hide);
    The problem seems to be that you commented the line where you bind the function hide (line 225). If both lines are there it works fine and if both lines are commented out it also works fine, but using unbind without binding first seems to cause this problem. Please note that this was just trial and error while I was bored watching TV – I haven’t tried finding any reason for this behaviour…

    Greetings from Luxembourg


  106. John
    25. June 2007 |06:27

    Thanks for your quick reply and thanks for a great working script!

    Ill try it out, ill come back with more info later.

  107. John
    25. June 2007 |11:51


    Aint working, so where do I get a plugin to get it work proper with IE?
    Or any tweaks to be done in the code?

  108. John
    25. June 2007 |12:11

    Quick question, sorry for all the questions.

    Is it possible to use two
    Hover me, please

    Cause i have one in the top of the page, it works, the other one aint.
    How do I add more? :)

  109. Claudia
    25. June 2007 |13:56

    Hi John

    I don’t know what you need it for, but the svn for bgiframe is here:


  110. 25. June 2007 |15:01

    @Claudia: Thanks for you debugging information and suggestions. That helps a lot. Please continue being bored and watching TV if you don’t mind :-)

    @John: To enable bgiframe for the tooltipl plugin add this code to your page, after initializing tooltips:


    I’m not sure about your other question. An example help would help a lot to explain your issue.

  111. John
    25. June 2007 |21:26

    Well, lets say I have two “links” i want to use the fancy-effect with. Ive made a .png-file and it works just fine.

    But when I add the string for this on another link, it wont be shown.

    a id=”pretty” href=”#” title=”I am pretty! – I am a very pretty tooltip, I need lot’s of attention from buggers like you! Yes!”>Hover me, please

    For example, thats my first link, and I want a second link with tooltip. How? Cant just add the same, wont work.

  112. 25. June 2007 |21:32

    @John: How about using a class selector instead of an ID selector? There can be only one ID on a page, but there is no restriction for classes.

  113. John
    25. June 2007 |22:10

    Ah, thats true :)

    Hm, not to sure how I do? Do i need to change in the css-code?

  114. 25. June 2007 |22:31

    It would be a ton easier to help you with a specific example. Could you post a page?

  115. John
    26. June 2007 |04:24

    Sure, http://g-academy.tweak.se/

    Theres a tooltip for “aka” right under the logo, and one in the very beginning of the text. “Test”.

    I want the “Test” to look like the “aka”, simple.

  116. 26. June 2007 |19:22

    Change the first anchor to use class=”pretty” instead of id=”pretty”. Next, find the line with $("#pretty")... and modify it to $("a.pretty")....

  117. John
    26. June 2007 |21:06


    Thank you so much for your help and a fantastic script!

  118. 27. June 2007 |22:40

    Okey! Seems to work pretty fine right now, but JUST found another “bug”.

    If you go to http://g-academy.tweak.se and hover over the links “aka, keffo” and so on (under the logo). You’ll see it works as it should.

    But then try click in the “Yes (#)” under Details, so the page grows and gets bigger. Now when you are on the new section/page, try hover the “aka, keffo” etc again. Youll see that the tooltipballoon is way out of line.

    How come? Any solution? This is the final thing, then its 100% done!

    Thanks so far, and further on!

  119. 28. June 2007 |08:50

    @John: Yikes. There wasn’t any “Yes” I could click, but I could see the issue with a bit help from Firebug. Could you do me a big favor and save the page in a format I can use to test while fixing the issue? Just plain HTML, CSS and JS (without serverside stuff). Thanks.

  120. 28. June 2007 |19:43

    Of course!

  121. 28. June 2007 |20:40

    Now theres only .htm

    http://g-academy.tweak.se/index.htm and index2.htm

    Do I need to do anything more? Same “error” accours, so. Guess this should be it.

  122. 29. June 2007 |12:49

    Is there a way to get the CSS to validate? at the moment it does not like the opacity feature as it is CSS3.

    maybe you could use jquery to set the opacity?


  123. 29. June 2007 |17:07

    @John: Thanks, I’ll give it a try.

    @federico: Good idea. My first attempts at setting opacity via jQuery in IE weren’t that successful, but that should be possible.

  124. Claudia
    3. July 2007 |22:26

    Hi Joern (and John)

    As you can see I watched a bit of telly again…

    I am pretty sure that John’s problem stems from the fact that he adds 190px to the top position (line 230 of the jquery.tooltip.js).

    In the first, short page this does not have much effect as the top position is recomputed a few lines later and the new position is alright for this page. But on the longer page the v.cy is different and therefore the top position is not recomputed anymore.

    Just removing the 190 px should solve the problem.

    Seeing John’s test page reminded of something though:
    We also use tables in the tooltips (for vertical alignment of the content) but if you specify html in the title attribute the html does not validate at all and if javascript is disabled it looks pretty bad. I just rewrote the tooltip so it creates a table instead of a div but it might be nice if one could provide a node id of the content to show in the tooltip. On the other hand this would mean recreating the tooltip from scratch again every time so I am not sure whether this is really a good idea – what do you think?



  125. 4. July 2007 |19:31

    @Claudia: Good point about the offset. I’m trying to support setting the offset in a new version of the plugin and I’ll keep that in mind.

    About using mixing title-attributes and markup: A solution for this is to specify the tooltip content as footnotes instead of titles. The footnote is just an ordinary element somewhere in the document. The tooltiped-element refers to the footnote via an anchor. When the tooltip plugin is applied, the footnote is hidden and displayed as a tooltip.

    I had that mostly working, but removed it from trunk to get a stable release out at first.

  126. pingback

    [...] Maybe more useful are improvements on the project structure. In addition to the started changelog, the plugin page now uses the same documenation format as other plugins, provides links to an reworked demo, to the latest revision from subversion and, last but not least, there is now a project on jquery.com/plugins. Vote for the plugin if you like. [...]

  127. Claudia
    4. July 2007 |21:27


    Interesting idea with the footnotes – I will keep that in mind for the next time I need use tooltips. Thanks

  128. Kia Niskavaara
    5. July 2007 |09:29

    I’ve tried “A fancy tooltip, now with some custom positioning”. But there seems to be a problem with viewports. The bubble always look the same, even if it is to the left or above the cursor.

    Two questions:
    1) Is it possible to set a delay before the tooltip hides? I only find a setting that adds a delay before the tooltip shows.
    2) Can I make the tooltip stay as long as the mouse is above the tooltip?
    3) Why is fixPNG a setting? Shouldn’t this always be taken care of? Or are there any negative effects when using this setting?

  129. 5. July 2007 |13:41

    @Claudia: A Footip plugin would look like this:

    Foottip: function(settings) {
    	this.each(function() {
    	settings = $.extend({
    		bodyHandler: function() {
    			return $($(this).attr('href')).html();
    		showURL: false
    	}, settings);
    	return this.Tooltip(settings).click(function() {
    		return false;

    With HTML like this:

    &lta href="#overview" class="tooltip">stuff</a>
    <span id="overview">Explanation for overview, can contain as much HTML as you like</span>


    1) Nope, not yet.
    2) Do you refer to 1) when talking about “stay”? Otherwise I don’t know what you mean.
    3) If you don’t use PNGs there is no need to apply the overhead of checking for PNGs. But you’re right, that should be automated. And while we are at it, it would be even better if the pngfix is its own plugin, and if its present, its applied. There is a plugin for that, but its not yet working with the tooltip plugin.

  130. Kia Niskavaara
    5. July 2007 |15:25

    What about the viewport problem? Could you maby add one of these classes depending on where the tooltip is located: “tooltip-topright”, “tooltip-topleft”
    “tooltip-bottomright”, tooltip-bottomleft”. This way I can use those classes to show the “correct” preview bubble when the viewport makes the bubble move from the default location.

    Could you maby add the delay before the tooltip hides? Preferrably with an option to make it stick if the user moves the mouse pointer above it. Maby in the next Tooltip version? ;-)

  131. 8. July 2007 |13:44

    @Kia: Adding that class sounds like a great idea. Now that I understand what you wanted to do (display a different background) it makes a lot of sense. And its rather trivial to implement.

    Delay on hide and sticky tooltips are definitely interesting features. I’ll try to work on them.

  132. Capm Morgan
    10. July 2007 |23:47

    Hallo Jörn, great plugin. I am really interested in the sticky tooltips feature for Quick Post forms. I am currently doing this in dojo, but jQuery/jqtooltips is so much slimmer. I have started hacking it a bit, and I can get the tooltips to stay open the way I want, but cannot figure out how to close them if the users click anywhere but the form. The way I have them staying open is if settings.click is true instead of
    return this.each(function() {
    this.tSettings = settings;
    // copy tooltip into its own expando and remove the title
    this.tooltipText = this.title;
    // also remove alt attribute to prevent default tooltip in IE
    this.alt = "";
    .hover(save, hide)

    I have

    return this.each(function() {
    this.tSettings = settings;
    // copy tooltip into its own expando and remove the title
    this.tooltipText = this.title;
    // also remove alt attribute to prevent default tooltip in IE
    this.alt = "";

  133. 11. July 2007 |13:32

    I had a more or less working modal tooltip, but removed it due to many issues. You can still take a look at it at jQuery’s svn browser. Scroll down to line 123 (Modaltip: …). It’s not only sticky, but also resizable and draggable. See the stylesheet for necessary styles (span.close, span.resize).

    I’m still planning to add that to the plugin at some point, but I don’t have a schedule yet.

    Let me know if that helps.

  134. Capm Morgan
    11. July 2007 |23:41

    It appears as if it will be what I am looking for. But I am unsure if I am calling it correctly. if I use $(‘a’).Modaltip(opts…) I get nothing when click or hover. I need to use $(‘a’).Tooltip(opts…).Modaltip() in order to get it to work with clicking, and it does, but it also hovers.

  135. Cees
    12. July 2007 |13:33

    Hmm, upgrading to 1.1 i noticed that position:absolute in CSS is necessary – i did not specify this in previous release but had to in 1.1 otherwise tip was not visible.
    Just good to know ;-)

  136. 12. July 2007 |18:22

    @Capm: Well, now that you mention it, yeah, you have to chain both calls. Its very specialised and I developed it for a certain project I was working on. Tell me what you need exactly, and I can take that into account.

    @Cees: I removed the code settings styles via JavaScript, as it never was useful without any external stylesheets. Though you are right that it is easier to see whats going on when at least position:absolute is set via JavaScript.

  137. Capm Morgan
    12. July 2007 |22:53

    My goal is to popup forms to be filled out, so no hover, clicking the link opens the window, any click outside the form or the close button will close it. I have been working on it already, but cannot get each part to work together, I am still fairly new to jQuery so any help, and everything you have already done is appreaciated.

  138. 13. July 2007 |10:13

    @Capm: In that case you should use one of the modal content plugins. There are plenty available. From what I heard of validation-users, Thickbox+iframe+validation works quite well. Other modal plugins can be found on docs.jquery.com/Plugins

  139. Mike
    21. July 2007 |15:09

    Hi Jörn,

    Thanks very much for the excellent plug-ins, I am using several of them for one of my web sites. I have an issue that you may be able to help with.

    I am using Tooltip on a page that is viewed both inside and outside a proxy firewall. When viewed outside the firewall the user gets a URL with a session key that is always changing. As a result, I cannot hardcode the url property of a CSS background image. The properties must be set dynamically via $.css calls in the user’s page; using information in the location page property.

    Now, when setting the background png for the fancy class on the tooltip element id, this does not appear to work. I think this is likely because Tooltip is dynamically changing this information whenever the user mouses over a tooltip element.

    Would you suggest a way that I can deal with this? Perhaps there is a way I can modify Tooltip to handle this issue. I am not currently using version 1.1 of the plug-in. I have the previous version. But I can upgrade if that would help. I am using version 1.1.2 of jQuery.

    Thanks for any suggestions,

  140. 24. July 2007 |13:48

    @Mike: The plugin rewrites the background-image-url and adds a IE proprietary filter to get transparency to work. If you don’t actually need that or PNGs at all, you’d be out of trouble.

    Otherwise you need to modify the fixPNG plugin method (included in jquery.tooltip.js). Look for this line:
    filter': "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=crop, src='" + image + "')"

    Basically all you need is to concatenate the image variable with your special session key.

  141. 25. July 2007 |18:54

    Hi, thanks a lot for this plugin :)
    A little question: It is possible to position the tootilp in relation with the image position. I mean i want to have a several tooltips in a real fixed position, not depending of how the mouse gets over the image.
    Thanks again in advance.

  142. 27. July 2007 |15:20

    @gelo: Could you describe that in some more detail?

  143. 30. July 2007 |05:52

    I would like to be able to have images within my tooltip, to create the same effect that istockphoto uses when you browse their images. Is there anyway to do this?

  144. 1. August 2007 |03:40

    I’ve yet to find a solid, unobtrusive jquery plugin that can do this: http://taprootcreative.com/what_weve_done.php . This comes close, but it doesn’t appear to support images…

    This would be the holy grail of tool tips if this can be done…

  145. toine
    1. August 2007 |14:44

    Hey, thanks for the excelent plugins. I had trouble with hover which doesn’t make tooltip disapeared very often.
    I just changed the code like this:


    //.hover(save, hide)

    Everything is allright (and so nice) then

  146. 2. August 2007 |11:54

    yes, i want to show the tooltip of some links in an absolute position inside a div, so the tooltip is always in the same place when the mouse is over the image.

  147. 3. August 2007 |15:04

    @gelo: I see. So you need a given position for some tooltips, but not for all, right?

    @jive: You can do that with the bodyHandler-option, but it isn’t exactly easy to set up. In this case you should consider writing your own jQuery plugin that does exactly that: Showing images in a tooltip. Its really easy with jQuery and a few plugins that you can take as a reference.

    @toine: Alright. I had that before but changed it to be able to support hoverIntent. But so far that didn’t work out anyway, so I guess I’ll just change it back to mouseover/out. Thanks!

  148. jive
    11. August 2007 |16:04

    Actually you can have images within’ your tool tip. Very simply in fact. And it passes the validators (although a little unorthodox) heres how:

    Parses the images like a champ. Does what I need it to do. Validates. lol although probably not very semantic.

  149. jive
    11. August 2007 |16:05

    hmm apparently my code disappeared in the above post…

  150. Giovanni Glass
    13. August 2007 |15:25

    I don’t think Tooltip works with the latest Dimensions 1.1 and jQuery I had to use Dimensions 1.0b2 instead.

  151. Giovanni Glass
    13. August 2007 |15:44

    I take that back. It works but you must style the #tooltip first. Somehow I missed that. Is there a way to trigger the tooltip by click instead of rollover? That would be a cool feature.

  152. Giovanni Glass
    13. August 2007 |16:06

    BUG: with jQuery and Dim 1.1 and FF2, the tooltip will sometimes not disappear when rolled off an anchor tooltip. With tracking on, the tooltip floats with the arrow all over the page unless the link is rolled over again.

  153. Giovanni Glass
    13. August 2007 |16:10

    Tracking doesn’t seem to make a difference. It still sometimes fails to disappear. It needs a feature where if one clicks the tooltip or outside of it, it should disappear.

  154. Marc
    15. August 2007 |15:19

    Hi Jörn,
    thanks for that great plugin! Just one question:
    How to remove a tooltip from an element?

    I need this because the tooltip is depending on various ajax result and dynamically added…

    Thanks for help!

  155. Mike
    19. August 2007 |17:07


    I second some of the above comments. When going to your Tooltip demo page with FF on Windows XP, I get about 6 errors at load time and some things do not work right.


  156. 22. August 2007 |00:11

    Hi there,

    tnx for the great tooltip!

    is there a way to dinamically set the tooltip message, passing it as an argument, without hacking the code?

    I have some data sotred in an array, which I would like to pass over to tooltip.

    Thank you!

  157. 24. August 2007 |16:24

    @jive: Thanks for posting. I’ll work on this blog to escape html instead of just removing it, very annoying.

    @Giovanni: Could you post a test page for the issue? I have a good guess on how to fix it, but I’d like to make sure it doesn’t come up again.

    @Marc: The easiest way is to do an $(“#mytoolipedelement”).unbind(). That removes all events bound to that element, which may not what you want. In that case you need to do unbind(“mouseover”).unbind(“mouseout”).unbind(“click”).

    @Mike: Thanks for the report. Again, can you provide a testpage?

    @Felipe: You can use the bodyHandler-callback for that. If specified, its called for each tooltip and you can return whatever you like to be put into the tooltip.

  158. Lewis Dawson
    28. August 2007 |18:50

    I have also seen something similiar to Giovanni:

    “Tracking doesn’t seem to make a difference. It still sometimes fails to disappear. It needs a feature where if one clicks the tooltip or outside of it, it should disappear.”

    This would happen for me when I was dynamically removing something from the page (a portlet) but the mouse-over event for a particular element was still triggered in the portlet because it had not yet been removed. I fixed that by checking to see if “current” still existed on the page in show():

    function show() {
    tID = null;
    // If there is no current element or if the element was removed from the DOM since the
    // mouse-over event was fired, do not show the tooltip
    if(!current || !current.offsetParent)


  159. Vikas
    29. August 2007 |06:28

    What I am looking to do is use an image map like in the examples but only show the tooltip when the map is clicked in the defined areas. Above for a label it says:

    Shows tooltips for labels with no delay, tracking mousemovement, displaying the tooltip when the label is clicked.

    delay: 0,
    track: true,
    event: “click”

    I tried adding event: “click” but it doesnt seem to work. is this possible?

  160. 20. September 2007 |17:17

    Hi, great little plugin perfect for what I need, but there is a problem – I can’t get it to work with IE7, as soon as I load it up, IE7 says “Internet Explorer cannot open the Internet site Operation Aborted”.

    My tooltip script is:

    $(“a[target='_blank']“).Tooltip({delay: 0,track: true,showURL: false, showBody:” – “});
    $(“.el”).Tooltip({delay: 0,track: true,showURL: false, showBody:” – “});

    I’ve narrowed it down to this script as the definite problem. As soon as I take out my tooltip script it loads fine.

  161. 20. September 2007 |17:23

    Just thought I’d add, I think I found something else regarding the problem as well – that is SWFObject – I think there could be a conflict problem? it works with either of this disabled. http://blog.deconcept.com/swfobject/

  162. 27. September 2007 |12:04

    this lines sped my script up by 600ms… hope it can get build in
    or something else, just try to figure out if this element really needs a tooltip before doing all the work

    PS: does it really need tSettings ? are the settings gonna change ? just a thought…

    Tooltip: function(settings) {
    settings = $.extend({}, $.Tooltip.defaults, settings);
    return this.each(function() {
    …new below…
    var me = $(this);
    if((!me.is(‘a’) || !settings.showUrl) && !me.attr(‘title’))return;

    this.tSettings = settings;

  163. 27. September 2007 |12:09

    grml cancel that, speedup was something else, but maybe it can still be done, trying sth else…

  164. 27. September 2007 |12:17

    ok.. now it works..

    Tooltip: function(settings) {
    settings = $.extend({}, $.Tooltip.defaults, settings);
    this.each(function() {
    var me = $(this);
    if((!me.is(‘a’) || !settings.showUrl) && !me.attr(‘title’))return;

    this.tSettings = settings;
    // copy tooltip into its own expando and remove the title
    this.tooltipText = this.title;

    // also remove alt attribute to prevent default tooltip in IE
    this.alt = “”;

    me.hover(save, hide);

    return $(this);

  165. 29. September 2007 |12:40

    @Michael: Not checking if the element has a title attribute allows you to appl the tooltip plugin and add the title later. If you don’t need that you can filter out before applying the plugin:


    That should yield even better performance while keeping the plugin very flexible.

  166. ben
    1. October 2007 |14:56

    Hi, thanks for the job!
    i need to place a bigger content in the tooltip. Is it possible to add html content instead of the ‘title’ txt content?

  167. Zoltán Török
    2. October 2007 |14:27


    I’ve just downloaded the zip, unpqacked to a dir and load the test page (index.html) into FF and it doesn’t work. There are no tooltips.
    There are no errors (firebug).

    Any idea?

  168. 4. October 2007 |10:33

    Jörn, someone asked you before, but i think you didnt see it: how to enable tooltip for elements that i add into page AFTER the page is loaded?
    Thanks !

  169. mixey
    4. October 2007 |19:03

    Hi Jörn,

    Thanks for the GREAT plugin first of all, but I also have a problem with it.

    I’m using it do display actual size of the banners that the user may place at the page. So when user is hovering link in the tooltip there is an image. Sometimes those images are quiet big and tooltip handle positioning wrong :(

    If the tooltip link is near the window side, then part of the tooltip is beyond the screen. (because it’s position is calculated from the mouse pointer)

    Is there any chance to force it stick to the nearest side of the screen in CASE if doesn’t fits in the screen when positioning under the mouse pointer with default values?

    Thanks, looking forward to hear from you

  170. 9. October 2007 |10:16

    @ben: You can display whatever you like using the bodyHandler callback.

    @Zoltán: No, it works for me without any problems. Disabled JavaScript (for local files)?

    @ionutz: You just need to apply the tooltip plugin to those elements after they are added to the page. Something like this:

    $("#content").load("someurl.php", function() {

    Or you can use the Live Query plugin.

  171. 10. October 2007 |18:56

    thanks! great idea and it works too :D
    i’ve tried (before i asked here) to use live query and no success.
    anyway, thanks again :D

    (install a „subscribe to comments” plugin here, it’s more easy to track comments :P )

  172. 10. October 2007 |22:12

    @ionutz: About a year ago I figured that comment feeds are useless. How foolish… I have some stuff to do on this site any, comment feeds will be included!

    Be sure to let Brandon know about your attemps of using the Live Query plugin together with the Tooltip plugin. In the long run that should work much better when dealing with a lot of Ajax.

  173. waller
    17. October 2007 |08:27

    It’s a nice plugin,I have used it in several projet;
    But in one 1 I meet a problem ,when I use the innerHTML(js) to insert the html in the div ,it doesn’t work.My html code like this:


    $(function() {
    track: true,
    delay: 0,
    showURL: false,
    showBody: ” – “,
    extraClass: “pretty”,
    fixPNG: true,
    opacity: 0.95,
    left: -120

    function select()
    GetIDList() //ID
    charttitle.innerText = ”;
    tablecontent.innerHTML = ”;
    if( selectid != “” )
    { xmlRequestObject.open(“POST”, url + ‘Testxz.aspx?Action=Total&Type=’ + oldtype + ‘&totalType=’ + oldTotalType, false, “”, “”);
    xmlRequestObject.send( selectid );
    reText = xmlRequestObject.responseText;
    tablecontent.innerHTML = reText;//
    var dt = new Date();
    utc = Date.UTC( dt.getFullYear(), dt.getMonth() – 1, dt.getDate( ), dt.getHours(), dt.getMinutes(), dt.getSeconds(), dt.getMilliseconds( ) );
    chart.style.backgroundImage = “url(” + ChartPath.value + ‘?’ + utc + “)”;
    charttitle.innerText = chartTitle;

  174. 17. October 2007 |08:39

    @waller: Can you post a test page?

  175. waller
    17. October 2007 |09:09

    I am sorry ,I don’t have static Ip to publish the page!
    My msn yjm@live.com ;
    I am sorry ,I don’t have static Ip to publish the page!
    I can paste the code, I have a page named total.html , I paste the code

    $(function() {
    track: true,
    delay: 0,
    showURL: false,
    showBody: ” – “,
    extraClass: “pretty”,
    fixPNG: true,
    opacity: 0.95,
    left: -120
    }); }); in the html ; In the page I also have a div ,in page it has a tree ,when select the tree node ,it called the js
    function select()
    chart.style.backgroundImage = ”;
    charttitle.innerText = ”;
    tablecontent.innerHTML = ”;
    if( selectid != “” )
    { xmlRequestObject.open(“POST”, url + ‘Testxz.aspx?Action=Total&Type=’ + oldtype + ‘&totalType=’ + oldTotalType, false, “”, “”);
    xmlRequestObject.send( selectid );
    reText = xmlRequestObject.responseText;
    tablecontent.innerHTML = reText;//
    var dt = new Date();
    utc = Date.UTC( dt.getFullYear(), dt.getMonth() – 1, dt.getDate( ), dt.getHours(), dt.getMinutes(), dt.getSeconds(), dt.getMilliseconds( ) );
    chart.style.backgroundImage = “url(” + ChartPath.value + ‘?’ + utc + “)”;
    charttitle.innerText = chartTitle;

    and the reText is like level

  176. waller
    17. October 2007 |09:29

    I have send you mail (joern.zaefferer@gmail.com); and my msn:yjm@live.com; Thank you!

  177. alcyone
    17. October 2007 |09:33

    Hi, thanks for your GREAT job!
    I want to show specified one tooltip when page ‘onload’, is it posiible? I can’t think anything better than yours.

  178. ScottDavis
    24. October 2007 |18:57

    Having a little issue with Opera (who cares, right?).
    The default action for Opera for hover over a link is to display the URL address in its own tooltip after about 2 seconds delay (yellow background, black 1px border, Address:xxxx). It has a higher index than so it displays on top. With tracking = ‘true’, you can move our new div around–and perhaps out from under the Opera tooltip. Opera’s tooltip is positioned left-aligned to the x-y position of the pointer, below the pointer– and runs to the right, even off the viewport.
    On your test page /tooltip/, on the last link (tooltip width auto width) if you hover over the “Goo” or left side of the text link, the tooltip is displayed above and to the right, truncated by the viewport.

    This Opera action pretty much negates the great value of this plugin.

  179. 28. October 2007 |12:42

    Hi, I love your plugin, it’s more lightweight than others and simpler! BUT … it lacks easy-ajax feature :) I’m trying to implement it by myself, but can’t do that…Have you got any idea to help me out?

    $(‘.widget_calendar a’).Tooltip({
    track: true,
    delay: 0,
    showURL: false,
    showBody: ” – “,
    bodyHandler:function() {

    var address = this.href;
    var html = $.ajax({
    type: “GET”,
    url: address,
    cache: false,
    success:function(msg){// don’t know what to put in here }

    // maybe I should use ‘return html;’ here ? Tried it but doesn’t function



    What I want to do is ajax-enabling a wordpress theme without modifying the theme, as to maintain a minimal approach ;) But I can’t understand how to assign a page’s content as the tooltip body…And can’t even imagine a solution to show a loading image/text! :) Any help out there? Thanks a lot for you interest,


  180. 28. October 2007 |20:55

    @waller: I didn’t get any mail from you, and the excerpt you posted is not helpful without the HTML. Could you send that mail again?

    @alcyone: Could you clarify what exactly you’d like to achieve?

    @Scott: Thanks for the report. I’ll try to get in touch with some opera guys and ask them for ideas. There isn’t much I can do to prevent that behaviour that I know of.

    @Dario: The value the bodyHandler returns is used as the tooltip. So unless you do a sync request (bad idea), that won’t work.
    What I recommend to try out: Load the tooltips after the page has loaded into each element using Ajax. So when the user actually hovers over an element, its already loaded and can be displayed without any delay.

  181. 30. October 2007 |11:57

    Hi, thanks for the answer.
    That might be a solution, but it would be unuseful if you try to apply it, for instance, to a wordpress theme … just try to imagine a hundred AJAX requests for a single page, in order to load all of the sidebar news’ titles&texts! what a pity, I preferred your work to cluetip’s one, it’s lighter and simpler, more minimal and faster! Thanks….

    PS what about an “wordpress comments subscription” plugin for your blog? ;)

  182. ruvan
    1. November 2007 |00:37

    This is super cool! thanks for your work, really appreciate your work!!!

  183. 1. November 2007 |19:28

    @Dario: If you worry about performance, you really should just find a way to add the stuff on the serverside without modifiying the theme. WordPress provides a lot of extension points for plugins to hook in.

    About the comment feed: Actually that existed, and stupid-me removed it because I assumed noone needed it. That was before people started posting lots of comments on these plugin pages. Supposedly it works by just adding “/feed/” to the URL, but for some reason that returns only the initial post for me, instead of the comments. I really need to update my wordpress version.

  184. 7. November 2007 |20:16

    We are using the demo bundled with the plugin and had a problem with the arrow pointing the wrong way when tooltips appear on the far right of the screen.

    We solved this by taking shadow2.png and creating a horizontally flipped version of it, named shadow2flip.png.

    Then we modified the CSS file to look like this:

    #tooltip {
    position: absolute;
    width:290px; height:250px;
    .tooltip-regular {
    background: url(‘shadow2.png’);
    .tooltip-flip {
    background: url(‘shadow2flip.png’);

    And modified jquery.tooltip.js update() function to look like this:
    // check horizontal position
    if(v.x + v.cx

  185. Carlos Fonseca
    7. November 2007 |22:03


    So… after all those comments, what do I need to do to insert some small images on the tooltip?

  186. 8. November 2007 |01:11

    @justin: Looks like your code didn’t quite make it. Could you send that via mail? It looks promising, thanks!

    @Carlos: You could add extra classes to each tooltip and control the images via CSS. Or put some img-tags in your title attributes. Or write your own bodyHandler which returns img-tags or whatever you need.

  187. Thomas Jaggi
    9. November 2007 |17:35

    Hi Jörn
    Safari shows the tooltip-div in the bottom left corner of the page before you hover a tooltip-link for the first time. Could this be avoided?

    Thanks, Thomas

  188. Thomas Jaggi
    9. November 2007 |17:40

    Update: It works if I change

    “.hide() .appendTo(‘body’);”


    “.appendTo(‘body’) .hide();”

    in the function createHelper().

    But I’m not sure if this will break something else…

  189. George
    14. November 2007 |06:15

    As with Thomas’ comment above, I am also wondering if there is a fix for the Safari bug (or if Thomas’ suggestion above is a fix)? Note the bug is evident on this very page…

    Thanks, George.

  190. Billy
    14. November 2007 |17:03


    Great script. Nice work :) I was wondering how easy it would be to add extra html on the same way that the br tags are added so that you could add styling to different parts of the text. Like, if I wanted one line to be a heading with bold, orange text, with normal text underneath?

  191. 14. November 2007 |21:51

    @Thomas: Thanks, your fix looks good. An alternative would be to position the tooltip somewhere offscreen. I’ll give that a try.

    @Billy: You can always implement the bodyHandler-option to do all kinds of fancy stuff.

  192. 21. November 2007 |21:13

    Thanks for the awesome script! It works great in all browsers BUT in IE 7 the font in the tootips is HUGE. I’ve played with all the styles in the CSS but to no avail. Is their a workaround to fix this from happening in Internet Explorer 7? Thanks for your help.

  193. CocoLeNain
    23. November 2007 |10:02


    I would like know if is it possible to display a tooltip on a element by a function call. As an example, when I click on a button, this button display a tooltip on another element.

    Thanks, CocoLeNain

  194. 27. November 2007 |14:23

    @eric: There is no magic going on. Setting #tooltip { font-size: … } should do the trick.

    @CocoLeNain: The idea is interesting, but currently not supported. The current plugin structure doesn’t make it exactly easy to achieve that. But as I actually need something like that for the validation plugin I’ll give it a try.

  195. 27. November 2007 |18:56

    how do you get the rounded edges on your tooltips used on this site?

  196. Robert R.
    2. December 2007 |20:17

    i have a little problem with the plugin.
    If there are many tooltip items on the page (eg. this page), it gets really slow.
    Firefox has up to 80% CPU usage if I go over different tooltips. I also tried with Konqueror. Same problem.
    On my testpage it is really fast after reloading the page. Then it slows down more and more.

    Is there a solution? I don’t want to use cluetip (no problems like that there)

  197. Matthew
    20. December 2007 |23:00

    Hello Jorn !

    I am using Tooltip because it is great.
    But I have a problem,
    1 time on 2 I get a blank content in the tooltip.

    Online demo :

    If you hover first time, it will be blank, hover a second time, then image and text will appear.

    I changed one line in the code :
    I changed this:
    this.tooltipText = this.title;
    this.tooltipText = $(‘#’+this.tSettings.local).html();

    (added an option : local: “idOfHiddenDiv”)
    Because I wanted the content of the tooltip to be the content of a hidden div.

    Thank you for any help !!

  198. 21. December 2007 |00:17

    J.j.: Thats just using a mozilla proprietory css attribute:


    Looks nice in Firefox and normal in other browsers. I guess I should add the style as specified by CSS 3 (border-radius), once another actually supports that, I’d look better too.

    @Robert: The problem is the use of mousemove together with this issue. There isn’t real solution yet.

    As a workaround, you can try to set track:false. That stops the tooltip from updating the position all the time.

    @Matthew: You are using both th e tooltip plugin and a custom hover “implementation”. That doesn’t make much sense. Use either the tooltip, or hover, but not both.

  199. Paul
    3. January 2008 |23:46


    Firstly, this is quite a great tooltip library you’ve created! Its saved some grief and time for myself and my team.

    basically I’m trying to conditionally turn the tooltips on/off based on a user preference in php. So I’m echoing

    echo "";
    if($_SESSION['platform']->user->preferences->getLong("TOOLTIP_TIMEOUT") user->preferences->getLong("TOOLTIP_TIMEOUT")."
    }); ";
    echo "";

    but it doesn’t appear to be turning off the default tooltips created by browser.

  200. Moonwalker
    4. January 2008 |15:38

    Great script! One question please.

    I’m using your script in combination with HighSlide:

    The tooltip is working fine, but when clicking on a link the window of highslide doesn’t appear. The link directs me directly to the page I was linking at.


    I think there is a conflict somewhere but I can’t find where.

    Any help is appreciated.

  201. Moonwalker
    4. January 2008 |16:45

    One more thing:
    The same code is working on:
    IE 6
    IE 7
    Opera (is not showing the tooltip at all, but the window is working)

    Is not working on:
    FireFox (the tooltip is visible, but it redirect to the link)
    Safari (does not show the PNG image, but it works)

    This is driving me crazy. :(

  202. Mario
    4. January 2008 |18:53


    Congratulations on this great plug-in!

    I am trying to use it but there is a small issue in Firefox that I would like to solve.

    If we have a link like this:
    OutSystems corporate site

    The return false should prevent the link redirect. And it does (under IE), but not under Firefox.

    Any suggestion?

    Thanks in advance.


  203. 8. January 2008 |20:28

    I love these tooltips, great work and very easy to implement.

    However, one problem I’ve run into is that using the Tooltip script together in conjunction with FusionCharts causes IE (6 & 7) to abort (Internet explorer cannot open the site, operation aborted). The page loads half way, then errors out to the stock IE ‘cannot display web page’

    I’m guessing it’s the FusionCharts.js, a copy of which can be viewed here:

    Removing either makes the page load normally.

    Anyone have any ideas what might be causing the conflict between the two?
    Thanks in advance,

  204. 15. January 2008 |16:55

    I’m having one hard time getting this to work. I may be missing it, but is there not readme file or documentation that explains a little better how to implement this with our site? I have nearly zero javascript experience, so I’m totally lost on how to implement this.

    I have an image gallery and I’m trying to make it where once someone hovers over the image, a tooltip will pop up with a full size preview of the image. Similar to what the lightbox effect does only faster and doesn’t require clicking.

    Here is my HTML:


    Here is where I’ve linked to the js files in the head of my page:

    $('ul#gallery li a').Tooltip();

    Can someone tell me what I’m doing wrong?


  205. 15. January 2008 |16:57

    Ok, well it looks like my past post didn’t include all of the HTML that I included even though I wrapped it in code tags, so I get nevermind since I can’t post what have here.

  206. 22. January 2008 |21:15

    OK mates, i solved the problem with IE6 & 7 when you get the message: “Internet explorer cannot open the site, operation aborted)” and the page doesn’t load.

    You have to change a part of the tooltip’s createHelper function, where the helper appends to the body. I don’t know why, but if you change the body to an element of your page, like a container, the problem doesn’t occure.

    helper.parent = $('')
    // hide it at first
    // add to document
    .appendTo('body'); // here it is the problem, you have to change the body

  207. John
    23. January 2008 |15:17

    I want to use the bodyhandler function. So I downloaded the demo and checked this out.

    $(‘#yahoo a’).Tooltip({
    track: true,
    delay: 0,
    showURL: false,
    showBody: ” – “,
    bodyHandler: function(){


    When I move the mouse over the anchors inside div #yahoo, firebug throws an error

    helper.body.html(this.tSettings.bodyHandler.call(this)).show is not a function
    [Break on this error] helper.body.html( this.tSettings.bodyHandler.call(this) ).show();

    jquery.tooltip.js (line 234)

    Any help is appreciated.

  208. ALM
    25. January 2008 |08:27


    We are thinking of implementing the Tooltip plugin on our website,
    but it seems however like it might be vulnerable when it comes to XSS (cross site scripting). If the text found in the a title attribute contains html tags it will run them.(which could be quite harmful if this is -tags) Do you plan to build in functionality which removes html tags or is there some way we can work around this?

    Many thanks

  209. pingback

    [...] It wasn’t entirely obvious what some of the fields were when adding a new release. We’ve updated this to provide a bit more information by way of a handy little jQuery tooltip plugin [...]

  210. Monkeytail
    30. January 2008 |18:37

    Great plugin!

    Strange thing… how to resolve? Font-size in IE does not correspondent with font-size property value in stylesheet. In IE font-size is much larger.


  211. 30. January 2008 |19:01

    Really good plugin, using it a lot!
    I placed a link to this page with the credit for it! really nice work!

  212. 31. January 2008 |20:00

    @Paul: You can set $.tooltip.blocked to enable/disable tooltips.

    @Moonwalker: Could you post a testpage with the tooltip/highslide combo?

    @Mario: Could you post a testpage?

    @Ben: Just including fusioncharts.js together with the tooltip works fine for me. Could you post an example that actually fails?

    @Deron: The 1.2 demo includes an example for showing fullsize images in the tooltip.

    @John: I’ve improved the bodyHandler option to accept HTML strings, DOM elements and jQuery objects as the return value. That may fix your issue.

    @ALM: You can use the bodyHandler option to escape the title before displaying it.

    @Monkeytail: Could you provide an example or some further explanation?

    @alex: Great to hear it just works for you.

  213. Monkeytail
    31. January 2008 |23:37

    @ Jorn

    The first screenshot shows the tooltip content in Internet Explorer, the second in Firefox. As you can see the text in IE is much bigger than in FF.





    #tooltip {

    #tooltip.pretty h3 {

  214. 1. February 2008 |20:21

    @Monkeytail: 1.2 now uses some additional CSS to its demo page to reset styles, solving that particular problem. I’ve reused CSS from Eric Meyer’s Reset Reloaded post.