Tuesday, November 29th, 2005

Tooltip.js: Creating simple tooltips

Category: JavaScript, Toolkit, UI, Usability

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

tooltip

Related Content:

Posted by Dion Almaer at 10:18 am
88 Comments

++++-
4 rating from 132 votes

88 Comments »

Comments feed

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.

Comment by Mark Kawakami — November 29, 2005

Hi Mark,

That totally makes sense. Decoupling elements like this would be very nice.

Cheers,

Dion

Comment by Dion Almaer — November 29, 2005

Mark,

I’ll add that soon, great idea :)

- Davey

Comment by Davey Shafik — November 29, 2005

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 :(

Comment by Andrew k — November 29, 2005

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.

Comment by Dustin Diaz — November 29, 2005

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

Comment by Davey Shafik — November 30, 2005

Doesn’t work at all in IE.

Comment by Mark Haliday — November 30, 2005

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?

Comment by Stadil — December 1, 2005

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.

Comment by YuanYuan — December 7, 2005

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

Comment by YuanYuan — December 7, 2005

[...] More info at http://tooltip.crtx.org/ and Ajaxian.com [...]

Pingback by Gaurav Jassal » Blog Archive » CSS Styling Tooltips — February 27, 2006

[...] Cool thing for showing tooltips… always a necessity! [...]

Pingback by Jason’s Weblog » Blog Archive » Cool javascript tooltip — February 27, 2006

Great tips. Thanks.

Comment by Peter — July 10, 2006

Gr8 tips , Thnx

Comment by Gladwin George Peter — July 29, 2006

Is the link dead ? I can’t manage to download the script.

Comment by Alex — August 28, 2006

Will any one give full sample code for Tool Tip?

Comment by Ashok — December 2, 2006

This is good stuff

Comment by Sid — December 18, 2006

I have applied the tooltip.js in my site http://www.bangladeshrocks.com

looks good

Comment by bangladeshrocks.com — January 18, 2007

Thx. Its very useful..

Comment by Luxus Haengematten — February 3, 2007

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

Comment by Producent Mebli — February 5, 2007

great script, very useful…

Comment by tanie linie lotnicze — February 11, 2007

In my opinion it`s a very helpful article. Thanku You for this!

Comment by tworzenie bannerów flash — February 20, 2007

perfect page and stuff. i like it really

Comment by Echthaar Haarteile — February 22, 2007

Excellent article it’s realy helpful, keep up the good work!
Thank you.

Comment by gutschein — March 25, 2007

Very nice article, thanks

Comment by Aukcje — April 7, 2007

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

Comment by Luggruff — April 13, 2007

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…

Comment by Shane plasebo — April 15, 2007

Great article, can I translate it and put on my site?

Comment by Recipe — April 19, 2007

Thanks, i was desperately looking for that info!, great article covering some points I really needed, some good usability info for.

Comment by ralf — April 20, 2007

You’re absolutelly right, man :)

Comment by cinema — April 23, 2007

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

Comment by strony internetowe — April 30, 2007

good

Comment by Kody do gier — May 2, 2007

woooow, super article, very useful
greetings from Poland :)

Comment by Å»yczenia urodzinowe — May 2, 2007

OK. I agree with you

Comment by Yacht charter — May 9, 2007

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

Comment by Tapeten — May 18, 2007

I think these blog is really useful for new comers and Excellent resource list.

Comment by MillionPixel — May 24, 2007

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

Comment by Regenbekleidung — May 30, 2007

Fantastic article covering some points I really needed some good usability info for. Best regards

Comment by t-shirt druck — May 31, 2007

A quite interesting idea is realized in this website! And a good and easy to handle design has been found too!

Comment by Onlineportal Ökologisch Bauen — June 14, 2007

Good article and site. Congratulations

Comment by budowa domów — June 16, 2007

lol when I saw tooltip I was thinking the little yellow box but this is by far better.

Comment by proxy — June 28, 2007

Great article, thanks.

Comment by justin — June 28, 2007

Great work keep it up!

Comment by flash — June 28, 2007

Ajax does it again – this is incredibly useful. Thank you

Comment by Tee — June 30, 2007

Thanks for the tip! I never would have come up with such a clever idea myself! Thank god we have the internet:)

Comment by Jakub — July 2, 2007

Thank you very much for your article.

Comment by Marc Andobnes — July 12, 2007

thanks for the tip.

Comment by shirt — July 12, 2007

What’s the name of the starsrating-script? looks very nice!

Comment by Mathias — July 17, 2007

Nice and helpful article. Keep up the good work.

Comment by Desenie — July 22, 2007

It’s very good article. Great site with very good look and perfect information.

Comment by Sd card — July 22, 2007

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.