One thing that I’ve always struggled with in the past when using floating tooltips like this is detecting the edge of the window so that the display of a tooltip does not cause scrollbars or display outside of the currently visible portion of the window. I’ve hacked my way around it, but there are still cases where the tooltip displays out of the visible portion of the window. I’d love to see you address this at some point as you seem to develop some very elegant solutions to common issues.

Another great, yet lightweight LEIGEBER script!

Note: In Firefox 2.0.0.14 (latest), tooltips in Demo page have rounded corners.
But in IE 6 tooltips have square corners…try it!
(using XP-SP2 here).

ooops! sorry -
still trouble showing rounded corners in IE6/XP,
in Demo page…FF 2.0.0.14 is fine.

As soon as your Demo page loads in IE6,
the corners are square, after a while they turn round.
They also turn round, if you reload the Demo page.
Some hovering event triggers the “roundness” in IE6?

Anyone else having this quirk or is it only me?
Ray SF

[...] пример и скачать скрипт как всегда можно на первоисточнике. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, [...]

[...] eklenebilen tooltip kodu yayınlandı. Gayet hoş görünen ve basit bir kodu olan bu yazıyı buradan görebilir ve indirip kullanabilirsiniz. Yine hiçbir kütüphane kullanmadan bu tasarımları [...]

[...] Fading JavaScript Tooltips 2kb - Web Development Blog This animated JavaScript tooltip script is very easy to use and lightweight at only 2kb. It is tested working in IE6+, Firefox, Opera and Safari. (tags: javascript) [...]

Hi,

Just came across this and at first glance it looks visually very nice but then I took a look at the markup for it and must say that it isn’t the best I have ever come across I’m afraid.

If I turn off JS then I don’t get any text on hovering over the links at all. You could have used a normal link and then used the title attribute and done the rest with JS so that if JS is turned off then you would still get some kind of feedback. Also the fact that they looked like links is very very confusing as you would expect them to go somewhere but as spans they are not going to do that.

So visually nice but let down by the way it was done I’m afraid.

Best wishes,

Mark

Hi Michael,

Sorry but I don’t quite get what you mean by not able to use HTML?

Best wishes,

Mark

[...] Fading JavaScript Tooltips 2kb - Web Development Blog (tags: javascript tooltip fading tooltips library webdesign animated tools **) [...]

Hi Michael

Thanks a lot or sharing this cool piece of code!
I’ve added some changes to allow two more parameters for show() to define the positioning: show(v,w,[t|m|b],[l|c|r]). The third parameter being top, middle or bottom, and the forth for left, center or right.

10c10
< var tt,t,c,b,h;
—
> var tt,t,c,b,ov,oh,pv,ph;
13c13,15
< show:function(v,w){
—
> show:function(v,w,_pv,_ph){
> pv = _pv ? _pv : ‘t’;
> ph = _ph ? _ph : ‘r’;
42c44,45
< h = parseInt(tt.offsetHeight) + top;
—
> ov = (pv == ‘t’ ? parseInt(-1*parseInt(tt.offsetHeight) - top) : (pv == ‘m’ ? parseInt(-1*tt.offsetHeight/2) : parseInt(top)));
> oh = (ph == ‘r’ ? parseInt(left) : (ph == ‘c’ ? parseInt(-1*tt.offsetWidth/2) : parseInt(-1*tt.offsetWidth - left)));
49,50c52,53
< tt.style.top = (u - h) + ‘px’;
< tt.style.left = (l + left) + ‘px’;
—
> tt.style.top = (u + ov) + ‘px’;
> tt.style.left = (l + oh) + ‘px’;

I’m not too much of a javascript coder so these changes come without any warranty…

Actually, the script as I ammended it parses any width attribute that you add to the “helptext” span. And, additionally, if you specify a unit of measurement (i.e. ‘8em’ ) then the script will use that measurement in preference to the px measurement that youve specified.

[...] Fading JavaScript Tooltips 2kb - Web Development Blog (tags: ajax article coding css design effect effects example tutorial webdesign tooltips javascript tooltip evolveea_web) [...]

[...] is a lightweight (2kb) JavaScript tooltip script that is created by Leigeber, a web development blog having nice JavaScript [...]

[...] gradevole che potrebbe servirvi nella creazione di ipertesti nel vostro sito. Si chiama Fading JavaScript Tooltips e pesa solo [...]

Nice website with good scripts , ty ty !!

hey, is this MIT license?

great script. I’ll have to play around with this.

? from a noob…How do I use an apostrophe or quotes within the description I’m trying to put in the tooltip box? I can’t seem to figure it out.

Can anyone tell me how to make this with an external js ?
thanks for your great js.

thanks, Michael!

[...] 11- Fading JavaScript Tooltips 2kb [...]

This looks really smart and elegant. I’m still learning js, and this is a great example for me, as is the other stuff you’ve posted! Thanks

This script is great. It looks really nice and is lightweight and easy to configure for the javascript novice. Unfortunately I’ve discovered a bug in FF when the tooltip is placed around a link. If you click the link and don’t move your mouse - so “tooltip.hide();” is not triggered - returning to the page leaves the tooltip activated even if you aren’t hovering over the link. You have to trigger “tooltip.hide();” again to turn it off. Does anyone know of a fix for this problem? Thanks again for a great script.

[...] - Fading JavaScript Tooltips 2kb - Web Development Blog saved by [...]

I like this fading effect, but how can I make this tool tip to stay there for some time or text can be selected and can be copied. I am eager to know how this can be done.

Maybe I found: simply, copying the code the apostrophe becomes high comma in ‘px’ and ‘number’.
After the substitution, everything works!

You have an excellent script here … I appreciate the use of it. One little question, since I am still in the mist of setting up another site & using this script …

I would like to see the ’rounded corners’. It seems that as implemented into my site right now, the script loads with square corners instead. The rounded corners add a refined touch that I appreciate more.

Can you advise me on this? Thanks!

[...] javascript tooltip [...]

Great scripts.. thanks

[...] Fading JavaScript Tooltips 2kb - Web Development Blogさんよりソースをダウンロードします。 Click here to download the script.からダウンロードすることができます。 [...]

I was playing around with this script and noticed that it had a tendency to be interrupted by other JS files also utilizing onmouseover. My solution was thus to modify the fade function as follows:

if(d == -1){
tt.style.display = ‘none’;
document.onmousemove = null;
tt = null;
}

This also had the benefit of not having the hidden div follow your cursor position on mouse out. I only tested in FF 3.0 so let me know how this fares in other browsers.

[...] is the first version which include a light version of Jquery, used for glide menu effect and a light weight (2kb) javascript tooltip function. As i mentioned this is an early version so if you have any ideas or comments plz feel [...]