bassistance.de » jQuery plugin: Tooltip

18 May 12

Romona Khan

JÖRN ZAEFFERER ON BASS, GEEKS AND ROCK’N'ROLL
Blog AboutjQuery pluginsWordpress Plugins
jQuery plugin: Tooltip

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

Files:

Download
Changelog
Demos
Documentation

Dependencies

Required

jQuery 1.2.x+
Optional

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

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
Donate

$ USD

€ EUR

No more comments.
Nilesh 7. November 2006 |22:03
ohh.. goodie, grate . thanks, should work in overflow div , scroll div? i hope

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!

Jörn 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.

Matt Mitchell 13. November 2006 |19:16
If you want to add ajax/images… a little HACK modification here…

IN THE SOURCE CODE:

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;
$(tBody).empty();
$(tBody).append(image);
} else {
$(tBody).load(href);
}
tBody.show();
}
IN YOUR HTML/USAGE PAGE

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() {
$('a').Tooltip({
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.

Jörn 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.

Matt 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?

Jörn 16. November 2006 |16:35
Hi Matt (yet another!

Yes, that is still on the TODO list.

Charles Tanton 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?

Jörn 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:

$('#tooltip').bgiframe();
Charles 17. November 2006 |17:42
Awesome – you are a star Thanks for a great tool and your help!

unijimpe » Blog Archive » jQuery Tooltip pingback
[...] jQuery Tooltip es una librería javascript que extiende las propiedades de jQuery y la cual nos permite agregar un tooltip a nuestra páginas web, esto con la posibilidad de personalizar el tooltip mediante CSS. [...]

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?

Jörn 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.

jeff 29. November 2006 |02:37
I look forward to seeing this fixed!

Jörn 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.

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?

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!!

Michael Price 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?

bassistance.de » jQuery related news: 1.0.4 release, people, tooltip 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. [...]

Taka 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');
}
$("label").Tooltip({injectFunc:myFunction});

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!

Jörn 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.

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.

Denise 4. January 2007 |00:30
Here’s the url to my problem posted yesterday:

http://www.vi.com.au/denise_test/test.html

Jörn 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/

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.

Jörn 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?

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.

Jörn 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
})(jQuery)
More info about that pattern.

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

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.

Thanks!!!

Jörn 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
});

jQuery('.pretty').Tooltip({
extraClass: "fancy"
});

jQuery('.pretty1').Tooltip({
extraClass: "fancy1"
});
Lars 15. January 2007 |18:42
Hi, is there a way to get it to fade in and out

– Lars

Jörn 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.

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.

Thanks!

Jörn 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.

netgra.de Blog » » JQuery - Plugintipps pingback
[...] Tooltip [...]

Mike 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.

Jörn 14. February 2007 |21:33
@Mike: Could you post an example page for that problem?

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.

SA 26. February 2007 |14:44
Hi,

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.

Thanks

Jörn 26. February 2007 |19:35
@SA: Could you post an example page? That would help a lot helping you.

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.

Jörn 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.

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?

Jörn 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.

John Glynn 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.

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

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.

Jörn 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.

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
SA

Jörn 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.

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.

Rogie 24. March 2007 |19:46
Jorn,

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.

Jörn 25. March 2007 |22:05
@Rogie: Yeah, something went awfully wrong there. I have to investigate that, thanks for reporting.

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?

Jörn 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.

will 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.

Thanks,
Will

will 30. March 2007 |01:44
It was crashing ie6 as well.

Why does microsoft have to make a browser?

Psicomante 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.
http://drupal.org/project/nicelinks

Jörn 5. April 2007 |16:45
@Psicomante: I’ll take a look at that module, and try to add support for external links.

Psicomante 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.

Jörn 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.

John 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?

Jörn 11. April 2007 |14:51
@John: There is a bug causing this behaviour. I’ll try to fix that as soon as possible.

John 11. April 2007 |18:48
Thanks Jörn, you can see the behaviour here:
http://www.havenvg.com/Map/?id=47&map=1&chunk=-29,23&image=C1_2_1_12.jpg

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.

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

Jörn 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.

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.

Jörn 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.

OSCAR 24. April 2007 |18:16
Great!!! I will try to do it.

OSCAR 25. April 2007 |09:34
Maybe could be nice to provide tootip message optin into validation with a new param:

rules
messages
TOOTIPS

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!

Jörn 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.

Tim Reader 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?
Cheers,
Tim

Jörn 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.

Tim Reader 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!
T

Jörn 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.

Tim Reader 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,
Tim

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.

Thanks,
Crayon

Jörn 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.

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!

Jörn 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() {
$("a").Tooltip();
});
If that doesn’t work, please post a demo page.

Priit 18. May 2007 |09:16
Tooltip is displayed only once…
http://priit.topnet.ee/ajax/jquery_sample.htm

Tim Reader 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)?
Thanks
Tim

Priit 18. May 2007 |15:03
@Tim actually I have the same issue

Jörn 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.

Tim Reader 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:
http://interface.eyecon.ro/

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.

Tim

Jörn 23. May 2007 |21:29
@Tim: Thats ok. The interface tooltip even provides animations, and its the one that I originally started with.

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?

Jörn 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.

ttancm 30. May 2007 |01:40
Hi,

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:
http://www.amusedme.com/2007/05/26/natures-battle-royale/

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.

Cheers

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:

http://channel9.msdn.com/ShowPost.aspx?PostID=215369

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="..." ]

ttancm 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.

Jörn 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?

ttancm 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 =)

Websolute 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?

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:

http://www.santoriello.it/tooltip/

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”)) {
event.preventDefault();
target.Tooltip({showURL:false,delay:0,event:”mouseover”});
}
}
\$(document).ready(function(){
\$(“table.zebra”).mouseover(handler);
});

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.

Tom

Jörn 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.

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?

Jörn 15. June 2007 |17:33
@Tom: Correct. Its a fundamental different approach.

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.

Regards
Robert

robert 20. June 2007 |11:19
Jörn,

Solved it by sniffing around in your css – thanks

Nice job…

Regards
Robert

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.

John 24. June 2007 |20:08
Hi, is there a way to have it by the mousepointer?

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

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?

Jörn 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.

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:

…
$(this).filter(‘[@title]‘)
// 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’)};
this.removeAttribute(‘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

Claudia

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.

John 25. June 2007 |11:51
http://jquery.com/dev/svn/trunk/plugins/bgiframe/bgiframe.js?format=txt

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?

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?

Claudia 25. June 2007 |13:56
Hi John

I don’t know what you need it for, but the svn for bgiframe is here:
http://dev.jquery.com/browser/trunk/plugins/bgiframe/

Claudia

Jörn 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:

$("#tooltip").bgiframe();
I’m not sure about your other question. An example help would help a lot to explain your issue.

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.

Jörn 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.

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?

Jörn 25. June 2007 |22:31
It would be a ton easier to help you with a specific example. Could you post a page?

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.

Jörn 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")....

John 26. June 2007 |21:06
Ah!

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

John 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!

Jörn 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.

John 28. June 2007 |19:43
Of course!

John 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.

federico 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?

thanks

Jörn 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.

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?

Cheers

Claudia

Jörn 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.

bassistance.de » Release: Tooltip plugin 1.1 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. [...]

Claudia 4. July 2007 |21:27
@Joern

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

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?

Jörn 5. July 2007 |13:41
@Claudia: A Footip plugin would look like this:

Foottip: function(settings) {
this.each(function() {
$($(this).attr('href')).hide();
});
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>
@Kia:

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.

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?

Jörn 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.

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;
$(this).removeAttr("title");
// also remove alt attribute to prevent default tooltip in IE
this.alt = "";
})
.hover(save, hide)
.click(hide);

I have

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

Jörn 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.

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.

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

Jörn 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.

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.

Jörn 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

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,
Mike

Jörn 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.

gelo 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.

Jörn 27. July 2007 |15:20
@gelo: Could you describe that in some more detail?

jive 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?

jive 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…

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:

.mouseover(save)
.mouseout(hide)

//.hover(save, hide)

Everything is allright (and so nice) then
peace

gelo 2. August 2007 |11:54
@jorn
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.

Jörn 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!

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.

jive 11. August 2007 |16:05
hmm apparently my code disappeared in the above post…

Giovanni Glass 13. August 2007 |15:25
I don’t think Tooltip works with the latest Dimensions 1.1 and jQuery 1.1.3.1 I had to use Dimensions 1.0b2 instead.

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.

Giovanni Glass 13. August 2007 |16:06
BUG: with jQuery 1.1.3.1 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.

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.

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!
Marc

Mike 19. August 2007 |17:07
Hi,

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

Mike

Felipe Ceglia 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!

Jörn 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.

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)
return;

helper.parent.show();
update();
}

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.

$(‘label’).Tooltip({
delay: 0,
track: true,
event: “click”
});

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

Ronald 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.

Ronald 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/

Michael Grosser 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…

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

this.tSettings = settings;

Michael Grosser 27. September 2007 |12:09
grml cancel that, speedup was something else, but maybe it can still be done, trying sth else…

Michael Grosser 27. September 2007 |12:17
ok.. now it works..

Tooltip: function(settings) {
settings = $.extend({}, $.Tooltip.defaults, settings);
createHelper();
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;
me.removeAttr(“title”);

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

me.hover(save, hide);
me.click(hide);
});

return $(this);
},

Jörn 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:

$("a[title]").Tooltip();
That should yield even better performance while keeping the plugin very flexible.

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?

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

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

Any idea?

ionutz 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 !

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

Jörn 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() {
$(this).find("a[@title]").Tooltip();
});
Or you can use the Live Query plugin.

ionutz 10. October 2007 |18:56
thanks! great idea and it works too
i’ve tried (before i asked here) to use live query and no success.
anyway, thanks again

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

Jörn 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.

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:

none

$(function() {
$(‘#pretty’).Tooltip({
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;
}
}

Jörn 17. October 2007 |08:39
@waller: Can you post a test page?

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() {
$(‘#pretty’).Tooltip({
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

waller 17. October 2007 |09:29
I have send you mail (joern.zaefferer@gmail.com); and my msn:yjm@live.com; Thank you!

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.

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 hove