Fading JavaScript Tooltips 2kb

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.

Darryl on 04 Jun 2008 at 9:32 am

@Darryl - I would be glad to address the issue you described. I will definitely include it in an updated version of the script at some point. In the meantime if you are choose to work with this script an need that functionality shoot me an email and we can work it out.

Michael on 04 Jun 2008 at 9:37 am

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

Ray SF on 04 Jun 2008 at 11:37 am

pls, disregard my prev post,
ref: square corners (under IE6/XP-SP2).

Seems to have been corrected!
Michael, you are just too fast!
Thanks!!!
Ray SF

Ray SF on 04 Jun 2008 at 11:40 am

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

Ray SF on 04 Jun 2008 at 11:46 am

@Ray SF - It is an issue with IE6, I run across it a lot. You can either preload the images via JavaScript or via a hidden div in the markup.

Michael on 04 Jun 2008 at 12:27 pm

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

Скрипт: Анимированные подсказки от Michael Leigeber - Блокнот on 04 Jun 2008 at 2:21 pm

[...] очередной “карапулькой” - очень маленький скрипт для всплывающих подсказок, который весит всего 2 килобайта, и притом абсолютно [...]

Всплывающие подсказки на JavaScript - всего 2K | JSToolbox - все о JavaScript on 04 Jun 2008 at 4:10 pm

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

2kb’lık tooltip « basarozcan on 04 Jun 2008 at 4:43 pm

JavaScript Fading Tooltips (Only 2KB)…

This is a lightweight (2kb) JavaScript tooltip script that is created by Leigeber, a web development blog having nice JavaScript resources.
The tooltip script has a fading animation whose alpha & speed can be set easily.

How to use it?

Include th…

Free Web Resources - Web Resources Depot on 04 Jun 2008 at 11:01 pm

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

Skylog » Blog Archive » links for 2008-06-05 on 05 Jun 2008 at 12:30 am

with a few small changes in the code I was able to make this more dynamic.
in the index.html if you change the links to this format:
consectetuer adipiscing
Testing 123 Testing 123

And in your code do this:
var ie = document.all ? true : false;
var tips = document.getElementsByTagName(”SPAN”);
for(i=0;i<tips.length; i++){
ti = tips[i];
if(ti.className==’hotspot’){
ti.setAttribute(’onmouseover’,'tooltip.show(event)’);
ti.setAttribute(’onmouseout’,'tooltip.hide()’);
}
}
…
tt.style.display = ‘block’;
var tips = w.target.getElementsByTagName(”SPAN”);
c.innerHTML = ”;
for(i=0;i<tips.length; i++){
ti = tips[i];
if(ti.className==’helptext’){
c.innerHTML += ti.innerHTML;
wt = ti.getAttribute(’width’);
wi = wt ? wt + ((wt!= parseInt(wt))?”:’px’) : ‘auto’;
}
}
tt.style.width = wi;
if(wi!=’auto’ && ie){
…

Then the code will automatically set the width if specified and draw in the text from the hissen span. This keeps it all nice and search-engine friendly.

C. David Dent on 05 Jun 2008 at 10:05 am

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

Mark Bowen on 05 Jun 2008 at 11:28 am

@C. David Dent - I like your approach, I will look into some other methods and consider updating the code. It does not look like you addressed overriding the auto width though, I also did envision a version 2 that would take at least a couple more parameters as well so I have to keep that in mind. Thanks for sharing.

@Mark Bowen - The problem with using the title attribute is that you cannot use HTML, validation would be impossible and trying to display images obviously would not work. I have seen tooltips like that but they are somewhat limited. As for the spans, that was only for demonstration purposes. Of course the script can be called from any element… img, span, link, div, etc. I tried to develop an expandable script that could take parameters if need be. I will be exploring doing some things better per your feedback and Davids. Thanks.

Michael on 05 Jun 2008 at 11:40 am

Hi Michael,

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

Best wishes,

Mark

Mark Bowen on 05 Jun 2008 at 12:04 pm

[...] Fading JavaScript Tooltips - lightweight (2kb) and very easy to use animated JavaScript tooltip script. It is tested working in IE6+, Firefox, Opera and Safari. Take a look at demo page. [...]

JavaScript Fading Tooltips on 05 Jun 2008 at 1:36 pm

@Mark - If you put encoded HTML in a title field without JavaScript it would obviously show the markup.

Michael on 05 Jun 2008 at 1:59 pm

[...] блог Майкла Лейгебера. Категория: JavaScriptАвтор: Spider Дата: 6 Июнь 2008 Время: 0:00 [...]

Всплывающие подсказки с эффектом затухания | АяксЛайн.ру on 05 Jun 2008 at 6:00 pm

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

links for 2008-06-06 « Simply… A User on 05 Jun 2008 at 6:32 pm

[...] Fading JavaScript Tooltips 2kb 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: webdev tutorial javascript usability) [...]

links for 2008-06-06 « Mandarine on 05 Jun 2008 at 10:32 pm

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…

Renzo Lauper on 06 Jun 2008 at 3:30 am

[...] سایت سازنده [...]

یک Tooltip تر و تمیز و خیلی کم حجم « Silvercover’s Weblog on 06 Jun 2008 at 9:39 am

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.

C. David Dent on 06 Jun 2008 at 1:15 pm

@renzo

If you use the approach I proposed above and changed the ‘width’ attribute to a ’style’ attribute you could do the same thing

C. David Dent on 06 Jun 2008 at 1:17 pm

@C David Dent - Thanks for clarifying, I overlooked that.

Michael on 06 Jun 2008 at 1:21 pm

[...] Fading JavaScript Tooltips 2kb - Web Development Blog (tags: javascript tooltip) [...]

links for 2008-06-06 « toonz on 06 Jun 2008 at 5:32 pm

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

a study in process + image + space » Blog Archive » links for 2008-06-06 on 06 Jun 2008 at 5:34 pm

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

JSPT - フェードするツールチップ on 06 Jun 2008 at 7:57 pm

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

JavaScript Fading Tooltips (Only 2KB) | APPZOMBiE on 07 Jun 2008 at 3:22 am

You can also create Rails helper to save your typing a bit (add this to app/helpers/application_helper.rb):

def tooltip(label, text, html_options={})
options = {:class => ‘hotspot’, :onmouseover => “tooltip.show(’#{text}’)”, :onmouseout => “tooltip.hide();”}.merge(html_options)
content_tag(:span, options) do
label
end
end

Then in your views, simply use:

<%= tooltip(”Your label”, “The tooltip text”) %>

Hope that helps someone

Gavin Laking on 07 Jun 2008 at 8:19 am

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

Javascript per descrivere i link | Voci dal web on 07 Jun 2008 at 9:58 am

@Gavin - Thanks for sharing.

Michael on 07 Jun 2008 at 10:23 am

Nice website with good scripts , ty ty !!

emino on 08 Jun 2008 at 12:44 pm

i came across found ur tooltips, is really nice work, yet i do have one problem, I wonder why my site just fade once, the second time it wont shows up again…

PS: if you take alook, my fader part is on my category…

kevin on 09 Jun 2008 at 9:49 am

@kevin - Everything looks to be in its right place. Do you know id the hide event is being fired? If so, how about the fade function?

Michael on 09 Jun 2008 at 10:13 am

@Michael - What you mean by hide event is being fired? I dun really get you, and while i inspect with firebug, I saw there is one id display hidden, once i rollover it (for the first time) is fine, but the second time the fade function seems like not working anymore… but when i reload the entire page and try agian, it works for once again…

kevin on 09 Jun 2008 at 9:05 pm

@kevin - At line 70 you are missing a t… it should be tt.timer not t.timer.

Michael on 10 Jun 2008 at 9:10 am

thanks yo michael…
your javascript is really awesome and lite, I’ll consider it when i develop a new site… cheer~

kevin on 10 Jun 2008 at 12:16 pm

hey, is this MIT license?

zelda on 11 Jun 2008 at 5:48 am

@zelda - No license specified, feel free to use in any way.

Michael on 11 Jun 2008 at 8:06 am

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

matt on 13 Jun 2008 at 6:16 am

Hi, great script. It works fine for me in all browser except IE (i’m using v7). I get page error tt.timer is null or not an object.
Any ideas?

Philip on 13 Jun 2008 at 11:22 am

@Philip - You get that with the posted demo in IE7? I am not getting it on my end. If this is on your website send me a link via email and I will take a look.

Michael on 13 Jun 2008 at 11:23 am

Michael, Have emailed you - thanks.

Philip on 13 Jun 2008 at 1:08 pm

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

Matt on 14 Jun 2008 at 8:22 am

@Matt - You would need to escape them with a backslash \

Michael on 14 Jun 2008 at 3:28 pm

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

elvis on 16 Jun 2008 at 2:23 pm

@elvis - I am confused by your question. If you download the script it does use an external JavaScript file. Shoot me an email if I am not answering the right question.

Michael on 16 Jun 2008 at 2:54 pm

thanks, Michael!

zelda on 17 Jun 2008 at 6:43 am

As usual…great coding, Michael. I’m wondering though - and didn’t read anyone else posting the same question - why didn’t you add the ability to make the tooltips sticky in order to add HTML content (e.g. images, URL;s, etc.)?

David Carriger on 24 Jun 2008 at 11:28 am

@David - There should be no problem adding any HTML content into the tooltip. Of course you would need to escape when necessary but you can pass anything into it. Am I missing something?

Michael on 24 Jun 2008 at 12:31 pm

Yes…the sticky quality. Currently, your tooltips shadows/follows the mouse wherever it goes. The functionality that I think this (excellent) tooltip is missing is the ability to have the tooltip stay in a set x,y position (relative to when the mouse first hovered over the assigned item). This would allow the insertion of (say) URL’s depicting “More Details…” or links to content relevant to the item the to which the tooltip is attached.

David Carriger on 24 Jun 2008 at 2:18 pm

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

Websites you shouldn’t have missed in JUNE 2008 on 01 Jul 2008 at 8:00 am

I like Renzo Lauper’s variant the most. Good improvement.

Else on 02 Jul 2008 at 5:20 am

[...] 次は、リスト外から見つけた最後の本命です！ #################################################### ■Fading JavaScript Tooltips 2kb http://www.leigeber.com/2008/06/javascript-tooltip/ [...]

とても軽量なツールチップ表示スクリプト » TMJ style on 07 Jul 2008 at 10:15 pm

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

marmot on 10 Jul 2008 at 4:48 pm

Hey, michael! You stoped posting? Your site is great! Please, come if more new stuff!

eduardo on 16 Jul 2008 at 7:37 am

@eduardo - No, hopefully I will have time to start posting again soon.

Michael on 17 Jul 2008 at 5:26 pm

Thanks, man!

eduardo on 22 Jul 2008 at 10:09 am

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.

scrobbins on 31 Jul 2008 at 1:22 pm

Really nice, thank you!

Olof Gustafsson on 12 Aug 2008 at 1:57 am

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

Websites tagged "tooltips" on Postsaver on 12 Aug 2008 at 9:14 am

Looks interesting, I’ve been looking for something like this with low overhead for a while…

wiggsfly on 21 Aug 2008 at 5:18 pm

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.

Shafaat Awan on 27 Aug 2008 at 2:40 pm

Very nice, but maybe I found a bug in IE6: if you scroll the page when you are on a tooltip, the box won’t scroll with the page and it’ll stay far away from the cursor. This is not the case in FF.
You can see it <a href=”http://www.museomusicabologna.it/archivio.htm” target=”_blank”>here</a>
There is a solution proposed, but it seems to me not working:
pos:function(e){
// For IE6 compatibity - nick 22/08/2008 11:32
var u = 0, l = 0;
if( typeof( window.pageYOffset ) == ‘number’ ) {
//Netscape compliant
u = window.pageYOffset;
l = window.pageXOffset;
} else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {
//DOM compliant
u = document.body.scrollTop;
l = document.body.scrollLeft;
} else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) {
//IE6 standards compliant mode
u = document.documentElement.scrollTop;
l = document.documentElement.scrollLeft;
}

u = ie ? event.clientY + u : e.pageY;
l = ie ? event.clientX + l : e.pageX;
tt.style.top = (u - h) + ‘px’;
tt.style.left = (l + left) + ‘px’;
}
Ah, and the scroll bug appears in IE7, too…

Enrico on 28 Aug 2008 at 4:31 am

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

Enrico on 28 Aug 2008 at 4:51 am

[...] http://sandbox.leigeber.com/tooltip/ Website : http://www.leigeber.com/2008/06/javascript-tooltip/ [...]

Zintak» Blog Archive » Fading Tooltips on 29 Aug 2008 at 2:30 am

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!

C.L. on 29 Aug 2008 at 8:30 am

if i want to use this plug in and code as a server control

so that we can wrap[ this functioonality.

can any one will tell me the way to wrap this as asp.net server control

keerthi on 04 Sep 2008 at 9:04 am

69 Responses

Leave a Reply