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'>

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>
<b>Starring</b>: Ewan McGregor, Hayden Christensen ...
<b>Director</b>: George Lucas
<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");

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");


Posted by Dion Almaer at 10:18 am

4 rating from 143 votes


Comments feed

Thanks for this helpful tip! I never would have come up with such a clever idea myself! I go to web 2.o

Comment by Luxus — July 23, 2007

Good article, thanks a lot for putting all this together.

Comment by Article Archiv — July 23, 2007

Great and excellent article t’s realy helpful. Thanks again.

Comment by sklep rowerowy — July 30, 2007

Very good site, thanks!

Comment by Online Flash Games — July 31, 2007

Fantastic article!

Comment by Soest — August 6, 2007

Excellent article t’s realy helpful. Thank you.

Comment by Textilgrosshandel — August 8, 2007

This blog posting was of great use in learning new information and also in exchanging our views. Thank you.

Comment by s.Oliver Uhren und Schmuck — August 22, 2007

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!

Comment by kredi — August 29, 2007

Excellent article. Thank you very much.

Comment by Reitsport — September 8, 2007

This article is very interesting and written by some clever guy.:) Thank you!

Comment by imprezy integracyjne — September 11, 2007

Thanks for this article. I like your posts

Comment by meble biurowe — September 12, 2007

Thanks for help, Keep up the good work

Comment by Hitcher — September 14, 2007

Great site with very good look and perfect information.Keep up the good work.
Thank you…

Comment by Dj Tiesto — September 16, 2007

Thanx a lot! This is very useful.

Comment by tÅ‚umaczenia angielski — September 18, 2007

Enjoyed browsing through the site. Keep up the good work. Thanks and Greetings

Comment by domeny — September 23, 2007

nice information, we come back soon

Comment by Kre Alkalyn — September 25, 2007

great site,thx

Comment by Pointfit — September 25, 2007

Very helpful site, thanks!

Comment by T-Shirt Druck @ Martin — September 28, 2007

nice, tahnk u very much.

Comment by Fernstudium — October 5, 2007

Thanks ! That´s really helpful.

Comment by Fernstudium — October 11, 2007

“Tooltip.js: Creating simple tooltips” – Good work. Cogratulations

Comment by bilety lotnicze — October 23, 2007

great site with very good look and perfect information…i like it

Comment by Der kostenlose Kleinanzeigemarkt — November 6, 2007

I am not sure I understand what you mean?

Comment by Migräne — November 28, 2007

thanks for this one.. it really help my site on tooltips.. Congratz!

Comment by mountlaurel — January 10, 2008

congratulations on this very useful site with lots of interesting facts…

Comment by mountlaurel — March 1, 2008

Thanks for the information! That´s really helpful.

Comment by Gutschein — March 23, 2008

Very helpful article! Thanks!

Comment by OTTOGutschein — March 27, 2008

Very nice. It also run on xsitepro. I like it.

Comment by xsitePro — May 28, 2008

Really good article, I’ll use information in my work

Comment by Tlumaczenia — June 20, 2008

Awesome site. I really have to say that, Ajax and these little tips for web programming helped me quiet a lot for my work.

Comment by fancy — July 7, 2008

thanks for your great site

Comment by tammy — July 7, 2008

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]

Comment by busti — August 15, 2008

Agree, thanks for that interesting stuff.

Comment by Degia — August 2, 2009

Thank you very much for your work. I like it very much. I didn´t like Ajax before, but now I will :)

Comment by Vau3000 — June 5, 2010

Thank you very much. Alas i’m having problems getting it to run in IE, are there any known problems?

Comment by Promotionscode — November 17, 2010

In my IE it also does not work. “hmpf”

Comment by Jannis — January 12, 2011

For me it worked just fine, thank you very much!

Comment by minify — May 18, 2011

thank you for this great tooltip :-)

best regards from Germany

Comment by Leuchtenblogger — November 30, 2011

Leave a comment

You must be logged in to post a comment.