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

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

the tooltip is awesome, btw. Thanks!

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.

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.

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.

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?

Hi Matt (yet another!

Yes, that is still on the TODO list.

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

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

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

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

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?

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.

I look forward to seeing this fixed!

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.

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?

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

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?

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

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!

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.

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.

Here’s the url to my problem posted yesterday:

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

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/

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.

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?

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.

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.

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

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"
});

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

– Lars

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.

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!

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.

[...] Tooltip [...]

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.

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

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.

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

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

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.

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

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?

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.

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.

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

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.

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

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

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.

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.

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.

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

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?

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.

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

It was crashing ie6 as well.

Why does microsoft have to make a browser?

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

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

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.

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

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?

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

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.

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

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

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.

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

Great!!! I will try to do it.

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!

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

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

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

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

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

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

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

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

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!

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

Tooltip is displayed only once…
http://priit.topnet.ee/ajax/jquery_sample.htm

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

@Tim actually I have the same issue

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

@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

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

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?

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

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

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

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

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.

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

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

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?

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/

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

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

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?

@Tom: Correct. Its a fundamental different approach.

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

Jörn,

Solved it by sniffing around in your css – thanks

Nice job…

Regards
Robert

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.

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?

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

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

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

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

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?

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?

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

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

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.

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

Ah, thats true

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

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

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.

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

Ah!

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

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!

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

Of course!

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.

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

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

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

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

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

@Joern

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

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?

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

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?

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

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


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.

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.

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

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

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.

@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

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

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

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.

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

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?

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…

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

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

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

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.

hmm apparently my code disappeared in the above post…

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.

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.

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.

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.

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

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

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!

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

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();
}

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?

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.

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/

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;

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

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);
},

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

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?

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?

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 !

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

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

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 )

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

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;
}
}

@waller: Can you post a test page?

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

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

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.

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.

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”,
dataType:”text”,
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,

Dario

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

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?

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

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

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;
z-index:1;
text-align:left;
color:#ffffff;
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

Hi

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

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

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

Update: It works if I change

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

to

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

in the function createHelper().

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

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.

Hey,

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?

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

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.

Hi,

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

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

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

Hello,
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)

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 :
http://matthew16.free.fr/temp/test14.html

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;
to:
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 !!

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

-moz-border-radius-bottomleft:7px;
-moz-border-radius-bottomright:7px;
-moz-border-radius-topleft:0pt;
-moz-border-radius-topright:7px;

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.

Jörn,

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.

Great script! One question please.

I’m using your script in combination with HighSlide:
http://vikjavev.no/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.

Testpage

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

Any help is appreciated.

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

Hi!

Congratulations on this great plug-in!

I am trying to use it but there is a small issue in Firefox 2.0.0.11 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.

Cheers,
Mário

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:
http://walkertracker.com/js/FusionCharts.js

Removing either makes the page load normally.

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

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:

{gallery-image-name}{gallery-image-description}

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

Can someone tell me what I’m doing wrong?

Thanks

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.

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
.hide()
// add to document
.appendTo('body'); // here it is the problem, you have to change the body


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.

Hi,

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

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

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.

^_^

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

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

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

—————————————————————————–

http://i27.photobucket.com/albums/c182/monkeytailbiz/IE7_1.jpg

http://i27.photobucket.com/albums/c182/monkeytailbiz/FF_2.jpg

—————————————————————————–

#tooltip {
...
font-size:10px;
...
}

#tooltip.pretty h3 {
...
font-size:8pt;
}


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