Fading JavaScript Tooltips 2kb

JavaScript Tooltips

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. Jacob Gube of Six Revisions has posted the script and a walk-through of the code and the logic.

Community support is available here. Paid support is also available, contact me for details.

Click here to visit the post at Six Revisions.

Click here for the demo.

Click here to download the script.

Posted by Michael in JavaScript on June 4, 2008

Darryl

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.
http://www.leigeber.com Michael

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

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

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

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
http://www.leigeber.com Michael

@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.
Pingback: 2kb’lık tooltip « basarozcan
Pingback: Free Web Resources - Web Resources Depot
Pingback: Skylog » Blog Archive » links for 2008-06-05
http://wildandbad.com:8181 C. David Dent

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

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
http://www.leigeber.com Michael

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

Hi Michael,

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

Best wishes,

Mark
Pingback: JavaScript Fading Tooltips
http://www.leigeber.com Michael

@Mark – If you put encoded HTML in a title field without JavaScript it would obviously show the markup.
Pingback: links for 2008-06-06 « Simply… A User
Pingback: links for 2008-06-06 « Mandarine
Renzo Lauper

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…
http://wildandbad.com:8181 C. David Dent

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.
http://wildandbad.com:8181 C. David Dent

@renzo

If you use the approach I proposed above and changed the ‘width’ attribute to a ‘style’ attribute you could do the same thing
http://www.leigeber.com Michael

@C David Dent – Thanks for clarifying, I overlooked that.
Pingback: links for 2008-06-06 « toonz
Pingback: a study in process + image + space » Blog Archive » links for 2008-06-06
Pingback: JSPT - フェードするツールチップ
Pingback: JavaScript Fading Tooltips (Only 2KB) | APPZOMBiE
http://gavin.laking.name/ Gavin Laking

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’, nmouseover => “tooltip.show(‘#{text}’)”, nmouseout => “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
Pingback: Javascript per descrivere i link | Voci dal web
http://www.leigeber.com Michael

@Gavin – Thanks for sharing.
http://www.infographiste.info emino

Nice website with good scripts , ty ty !!
http://www.my-territory.com kevin

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…
http://www.leigeber.com Michael

@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?
http://www.my-territory.com kevin

@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…
http://www.leigeber.com Michael

@kevin – At line 70 you are missing a t… it should be tt.timer not t.timer.
http://www.my-territory.com kevin

thanks yo michael…
your javascript is really awesome and lite, I’ll consider it when i develop a new site… cheer~
http://www.leigeber.com Michael

@zelda – No license specified, feel free to use in any way.
http://www.articlesnatch.com matt

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

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?
http://www.leigeber.com Michael

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

? 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.
http://www.leigeber.com Michael

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

Can anyone tell me how to make this with an external js ?
thanks for your great js.
http://www.leigeber.com Michael

@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.
http://www.quikstage.com/test_slider.php David Carriger

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.)?
http://www.leigeber.com Michael

@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?
http://www.quikstage.com/test_slider.php David Carriger

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.
Pingback: Websites you shouldn’t have missed in JUNE 2008
http://www.alarsoft.com/ Else

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

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
eduardo

Hey, michael! You stoped posting? Your site is great! Please, come if more new stuff!
http://www.leigeber.com Michael

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

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.
Pingback: Websites tagged "tooltips" on Postsaver
http://www.chriswiegman.com wiggsfly

Looks interesting, I’ve been looking for something like this with low overhead for a while…
http://www.makadco.com Shafaat Awan

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

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

Maybe I found: simply, copying the code the apostrophe becomes high comma in ‘px’ and ‘number’.
After the substitution, everything works!
Pingback: Zintak» Blog Archive » Fading Tooltips
http://clmareydtauthor.wordpress.com C.L.

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

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
Pingback: Anonymous
http://www.raaj.com.np www.Raaj.com.np

This tool tip can be even more optimized for better solution.

http://www.raaj.com.np/
Pingback: webdesignlab » Blog Archive » javascript tooltip
Pingback: [javascript]jQueryやprototypeに依存しないツールチップ | hayasaka修行ブログ～裏目人生脱却計画～
http://webpick.insicdesigns.com insicdesigns

2KB? wow amazing its so lightweight.
http://www.modevisual.com Corey

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

In the demo it seems that you use javascript in the link itself and that is quite troublesome should the visitor have their javascript disabled. Is there anyway that the script can be modified to parse normal href links and shows the fading tooltip?
Pingback: MyWeb2 » Blog Arkiv » CMS design - userfriendly design of your admin page
Sohani

Great script.

Did anybody get the answer for the post for page error tt.timer is null or not an object.

I am getting that error on IE 7.
MAK

anything about the tt.timer is null or not an object ?
Florian

Great script But I have troubles with selectboxes in IE6 (iframe selectbox hack). Does anyone have a solution to this problem?
Lex

how would one change the font color in say just 1 of the tool tips if you had 5 on a page. I see you added to some text, but how would you stylize some text with color?
http://www.zed-axis.com/WebsiteDesign/index.aspx Web Development India

Thank you very much for sharing this java script code. very easy to use code very helpful for animation and fonts.
http://www.mystressmanagement.net Stressed Student

Heh great work master. First time I found your website and it took me few seconds to realise that it has a lot of things and scripts I am looking for.

You are the master
Pingback: JavaScript Fading Tooltips | i386.pub.ro
http://www.mores.cc mores

@lex: use Text to format your text any way you wish.
http://skribble.info Free One Way Links

Awesome work on this. I love this addition and your site has a lot to offer. Thanks!
Pingback: AMIS Technology blog » Blog Archive » ADF Faces RC - Highlight partially refreshed areas to enlighten the user about automatic updates
Dan benDan

Thank you for making this available. I am just starting to learn javascript and found this via google. Can you answer one question for me please!
How do I make the tooltips float above MediaPlayer? I have spent days searching/trying to make this work and No Joy. I have set style.zIndex and z-index and nothing works.

I will appreciate any help you can give.

Thank you

–
Dan benDan
Seetharaman Srinivasan

It is really very educational and useful. Is this free to use? How do we bring the tool tip to show at the bottom of the link rather than top.
Seetharaman Srinivasan

Sorry I missed to see your response that there is No License and free to use
Steve

Quick question – is it possible to make the tooltip automatically fade out after a certain period of time (eg 5 seconds) without onmouseout – ie while the cursor it is still hovering on the link/element?
Ozgur

For Internet Explorer 6.0, after mouseovering of the link, something causes process in every mouse movement. It seems timer problem and cursor changes like page is refreshing.
Pingback: A collection of Free ToolTips using AJAX, JavaScript & CSS
PhilJ

Yes, I also noticed in IE6 the cursor flickers after you have hovered over a tooltip. Too bad, cos I really wanted to use this one. Keep up the good work though… amazing stuff.
http://www.book-value.co.za car-book-value

Does this one support images? i need one which can have images as the tip
Drew

I have a bunch of these on the site im working on. Love the script and styled with css. Here is the url (hover over left nav): http:///www.centraltimeclock.com/ctcbeta/timeandattendance My only issue is that when testing for SEO, the most common 2 & 3 word phrases happen to be "tooltip onmouseout" I need to fix this somehow please!! Is there a way to NOT code the html the long way?
http://www.starconfig.com.au Star Config Web Design

It is really great script, thank you for letting us know, looks good and easy to work with.
http://www.qualitycoach.se Jez

Hello and thanks
I added support for automate this on span-elements with a specific class name during the page onload:

//Page
Info text goes here…
Another info text goes here…

//CSS
.ToolTip {cursor:help; width:16px; height:16px;display:block;background:url(images/help.png);font-size:0%;line-height:1px;overflow:hidden;}

//JS
window.onload = function () {
var myArray = getElementsByClassName(document, "span", "ToolTip");
for ( var i=0, len=myArray.length; i<len; ++i ){
myArray[i].onmouseover = function () {
tooltip.show(this.innerHTML);
};
myArray[i].onmouseout = function () {
tooltip.hide();
};
}
};

function getElementsByClassName(oElm, strTagName, strClassName){
var arrElements = (strTagName == "*" && oElm.all)? oElm.all : oElm.getElementsByTagName(strTagName);
var arrReturnElements = new Array();
strClassName = strClassName.replace(/\-/g, "\\-");
var oRegExp = new RegExp("(^|\\s)" + strClassName + "(\\s|$)");
var oElement;
for(var i=0; i<arrElements.length; i++){
oElement = arrElements[i];
if(oRegExp.test(oElement.className)){
arrReturnElements.push(oElement);
}
}
return (arrReturnElements)
};
Pingback: 制作メモ – 簡単ツールチップ – NonTitle
Marie

Is there a way to not have the tooltip follow the cursor?
Nestor Peña

Hi Michael and thanks,

I have a problem with this script when I use it over with the sortable script as the tooltip appears behind the table with sortable script, as I can make it appear on the table?