Tuesday, November 29th, 2005
Tooltip.js: Creating simple tooltips
Category: JavaScript, Toolkit
, UI
, Usability
Tooltip.js is a simple library that builds on top of Prototype and Script.aculo.us.
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");
4 rating from 143 votes
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