Tuesday, November 29th, 2005
Tooltip.js: Creating simple tooltips
Category: JavaScript, Toolkit
, UI
, Usability
You can create tooltips programatically, or just by using special CSS classes.
CSS Styling Tooltips
The most simple example is to add a div with the class of tooltip immediately after the item that you wish to activate a tooltip. E.g.
<p>Click this to show the tooltip</p> <div class='tooltip'> <h1>Header</h1> <p>Contents</p> </div>
Since this is just a div, you can put anything you want in it. You can also create custom activators and such. E.g.
<p><img src="images/dvd.jpg" alt="DVD Cover"></p>
<div style="opacity: 0.999999;" class="netflix tooltip" id="tt3">
<h1>Star Wars: Episode III</h1>
<p>In the third and final installment of the Star Wars prequel trilogy, Anakin Skywalker ... </p>
<p>
<b>Starring</b>: Ewan McGregor, Hayden Christensen ...
<br>
<b>Director</b>: George Lucas
...</p>
<p class="close" style="margin: 0pt; text-align: right;"><a style="cursor: pointer;">Close</a></p></div>
<p id="customActivator">This is a custom activator</p>
<p style="display: none;" id="customTip">This is the custom tooltip.
<p class="close" style="margin: 0pt; text-align: right;"><a style="cursor: pointer;">Close</a></p></p>
<script type="text/javascript">
Tooltip.add("customActivator", "customTip");
</script>
JavaScript Activation
You can draw the lines yourself with JavaScript
Tooltip.add('idOfActivator', 'idOfTooltip');
// Or
activator = document.getElementById('idOfActivator');
tooltip = document.getElementById('idOfTooltip');
Tooltip.add(activator, tooltip);
You can also simply choose the events that you want to show or hide the tooltip:
// Show on clicking and tabbing on to the activator
Tooltip.showEvent = new Array("click", "focus");
// Show on clicking on and tabbing off the activator
Tooltip.hideEvent = new Array("click", "blur");
Related Content:
3.9 rating from 130 votes
It seems like you could also use a custom class name to mimic something like the “for” attribute of label elements (I’ve done this for form validation). So you could say ‘class=”tooltip for_ep3icon”, and the javascript would look for a class of “for_something” for any element with a class of “tooltip” and bind it to that element. That way you’re not dependent on source ordering, and you can re-use identical tooltips that are the same for multiple elements on the page. Not that source-ordering in this instance is bad.
Hi Mark,
That totally makes sense. Decoupling elements like this would be very nice.
Cheers,
Dion
Mark,
I’ll add that soon, great idea :)
- Davey
Certainly interesting, but the first example can’t be tabbed to (only tabbed away from) and I had great difficulty making the second example dissappear (both w/ FF 1.5rc3).
Little bugs like that are what make me stear clear of similar js powered niceties :(
This is pretty neat. Simple to implement and unobtrusive. It’s too bad you have to bundle it with prototype and scriptaculous.
I had a fairly innovative approach for displaying tooltips for elements with title attributes a while back called Sweet Titles (http://www.dustindiaz.com/sweet-titles/). Fades in your tooltips and all that jazz.
Dustin,
I just released 0.5.0 which actually makes it possible to write-out the use of Scriptaculous,
just change “Tooltip.showMethod” and “Tooltip.hideMethod” to non-scriptaculous functions :)
- Davey
Doesn’t work at all in IE.
The Netflix copycat works in IE sort of.
Look here
http://testing.swophit.com/test/ieflix.html
It is not pretty due to the problem with png and IE, but it works.
Anyone have an idea how to make it better?
this is my hack,
http://blog.yam.com/yuanyuan/archives/833964.html
I change tooltips.js few code,
//Tooltip.showMethod(tooltip, {duration:Tooltip.fade});
change to =>
tooltip.style.display = “block”;
because when I use the fade effects, the border is black first, then Gradient Bevel display, so I change the code.
and U can C,I creat CSS hack,png transparent work fine with IE5.5+/FF1.0+
http://blog.yam.com/yuanyuan/archives/564273.html
[...] More info at http://tooltip.crtx.org/ and Ajaxian.com [...]
[...] Cool thing for showing tooltips… always a necessity! [...]
Great tips. Thanks.
Gr8 tips , Thnx
Is the link dead ? I can’t manage to download the script.
Will any one give full sample code for Tool Tip?
This is good stuff
I have applied the tooltip.js in my site http://www.bangladeshrocks.com
looks good
Thx. Its very useful..
Enjoyed browsing through the site. Keep up the good work. Thanks and Greetings
great script, very useful…
In my opinion it`s a very helpful article. Thanku You for this!
perfect page and stuff. i like it really
Excellent article it’s realy helpful, keep up the good work!
Thank you.
Very nice article, thanks
Ok, I feel totally retarded, how do I get it to work??!
Can someone please post a step-by-step guide?
With EVERY detail of the process included??
If you do, please contact me by clicking my name on this post! (Luggruff!)
This tooltip script does not work properly. The first time I’ve tried it, it was working fine, but then afterwards when i tried it on a client website, the tooltip was a real mess.
First the tooltip was not properly aligned to my image and worse, on IE the tooltip does not appear at all.
Try the tooltip combined with mootools. This one is better and works perfectly on firefox and IE…
Great article, can I translate it and put on my site?
Thanks, i was desperately looking for that info!, great article covering some points I really needed, some good usability info for.
You’re absolutelly right, man :)
very nice work.
if u can show the position with it of a object with it
then it would be nice.
if it is already happening there, then please tell me how it is.
thanks for nice tool
good
woooow, super article, very useful
greetings from Poland :)
OK. I agree with you
Great and excellent article t’s realy helpful. Thanks again.
Wow. Very impressive.
I think these blog is really useful for new comers and Excellent resource list.
Great and excellent article t’s realy helpful. Thanks again.
Fantastic article covering some points I really needed some good usability info for. Best regards
A quite interesting idea is realized in this website! And a good and easy to handle design has been found too!
Good article and site. Congratulations
lol when I saw tooltip I was thinking the little yellow box but this is by far better.
Great article, thanks.
Great work keep it up!
Ajax does it again – this is incredibly useful. Thank you
Thanks for the tip! I never would have come up with such a clever idea myself! Thank god we have the internet:)
Thank you very much for your article.
thanks for the tip.
What’s the name of the starsrating-script? looks very nice!
Nice and helpful article. Keep up the good work.
It’s very good article. Great site with very good look and perfect information.
Thanks for this helpful tip! I never would have come up with such a clever idea myself! I go to web 2.o
Good article, thanks a lot for putting all this together.
Great and excellent article t’s realy helpful. Thanks again.
Very good site, thanks!
Fantastic article!
Excellent article t’s realy helpful. Thank you.
This blog posting was of great use in learning new information and also in exchanging our views. Thank you.
My #1 feature request to start with: provide an option to make clicking away from the tooltip hide it. I find having to click on the original element or on a separate close link to be somewhat confusing. Otherwise, keep up the good work!
Excellent article. Thank you very much.
This article is very interesting and written by some clever guy.:) Thank you!
Thanks for this article. I like your posts
Thanks for help, Keep up the good work
Great site with very good look and perfect information.Keep up the good work.
Thank you…
Thanx a lot! This is very useful.
Enjoyed browsing through the site. Keep up the good work. Thanks and Greetings
nice information, we come back soon
great site,thx
Very helpful site, thanks!
nice, tahnk u very much.
Thanks ! That´s really helpful.
“Tooltip.js: Creating simple tooltips” – Good work. Cogratulations
great site with very good look and perfect information…i like it
I am not sure I understand what you mean?
thanks for this one.. it really help my site on tooltips.. Congratz!
congratulations on this very useful site with lots of interesting facts…
Thanks for the information! That´s really helpful.
Very helpful article! Thanks!
Very nice. It also run on xsitepro. I like it.
Really good article, I’ll use information in my work
Awesome site. I really have to say that, Ajax and these little tips for web programming helped me quiet a lot for my work.
thanks for your great site
Great skript – Thanks!
You worked very hard – Very helpful!
[url=http://www.kirchner-brunstein.de]Thank [/url] [url=http://www.kirchner-brunstein.de]you ! [/url]
Agree, thanks for that interesting stuff.
Thank you very much for your work. I like it very much. I didn´t like Ajax before, but now I will :)
Thank you very much. Alas i’m having problems getting it to run in IE, are there any known problems?
In my IE it also does not work. “hmpf”
For me it worked just fine, thank you very much!
thank you for this great tooltip :-)
best regards from Germany