Websites and web applications alike are slowly but surely transitioning towards an environment filled with rich user interface gadgets. Tooltips are amongst this vast array of gadgets that should be in every web application developer’s toolbox, as they provide useful hints and help messages directly to the user in a discrete yet obvious manner.

The Finished Product

Getting Started

As always, we should be aiming to maintain a minimal XHTML footprint in order to ensure that our code is well structured and sufficiently semantic. In the case of tooltips, we can make use of the title attribute provided for all tags, although most commonly used by the anchor tag and the image tag.

Furthermore, we can discretely signal our jQuery code to display a tooltip by using an uncommon and specific classname such as show-tooltip. Let’s start with the following basic example:

<a href="http://google.com/" class="show-tooltip" title="Start your search with Google!">Google.</a>

By using semantic attributes such as title, we ensure that the browser will degrade nicely for users without JavaScript enabled. The tooltip that loads by default by the browsers should be fairly familiar:

Basic link with a tooltip

Using jQuery to Override Tooltips

Overriding the default tooltip using jQuery is simple. We construct a new span using jQuery’s $('<span/>'); for each link, fill it with the title tag, and then place this element directly after the anchor tag we found. We also clear the existing title tag to eliminate the default tooltip.

jQuery cuts these operations down significantly. Using the .each(), .html(), and .after() functions, this code is condensed into about a half dozen lines of code.


		$('.show-tooltip').each(function(){
		     $(this).after($('<span/>')
			.attr('class', 'show-tooltip-text')
			.html($(this).attr('title')))
			.attr('title', '');
		});

Alongside this block of code, our setup function also sets the .hover() callbacks that will be manually processing the showing and hiding of the tooltips. Within these callbacks, we can use e.pageX and e.pageY to determine the coordinates of the mouse, and use this to position our tooltip.

With a couple of lines of CSS, we end up with a rough imitation of the standard tooltip we are used to seeing.

The Basic Styling Applied to the Tooltips

Putting it All Together

At this point, the only thing left to do is make it a bit prettier. As this now a normal element that is within our control, we are able use standard CSS on span.show-tooltip-text. This includes adding background images, changing font sizes or colors, and anything else you might want to do for your tooltip. The only real restriction is that you will usually want to keep position: absolute; on this to ensure that it is positioned properly.

Furthermore, we can use jQuery’s built in .fadeIn() and .fadeOut() to help the tooltip look even better.

Fully-Styled Tooltip

Wrapping Up

The code to implementing these tooltips is extremely simple and concise, and this allows you to incorporate tooltips into your application without unnecessary bloat and hassle. Tooltips should be used wherever helpful advice can be provided, and now it’s just a matter of adding a title attribute and a classname.

Keep in mind that because we are using .html() instead of .text(), we can incorporate any HTML (including newlines and formatting) into our title, but do be warned that the standard tooltip will not format this properly and therefore degradation may not be ideal.

The Finished Product

The example shows two situations where you would commonly want to have tooltips, although the possibilities are really endless, as indicated by the w3′s decision to allow the title attribute on every tag.

Tutorial kindly written by Nathan Wong

  • http://hisman.org Hisman

    Wow,,good article…

    I must try it

    thanks for share…

  • Eugene

    Now everyone is talking about the American economy and eclections, nice to read something different. Eugene

  • http://www.taotedesign.com Vincent Le Pes

    I just noticed a small bug in FF3, when you enter the button from the right side, the tooltip comes up with the background too short and a scrollbar.

    Just a heads up, thanks for the great post.

  • http://nathanwwong.com/ Nathan Wong

    Vincent: Yeah, I noticed a few problems with the iframe too. I assumed not many people were going to be using it within a tiny iframe like that, so I thought it wouldn’t be too much trouble. Thanks for pointing it out, though, and thanks to everyone for the kind words of encouragement. :)

  • http://www.1stwebdesigner.com Dainis Graveris

    wow, great outcome, lovely detailed tooltip…thanks mate..:)

  • Maicon

    Very good tutorial. Thank you.

  • http://www.corporatewebsolutions.net Diego
  • http://www.tutorialsroom.com Tutorials Room

    Good Tutorial! It was chosen for the home page of http://www.tutorialsroom.com
    Please submit all of your future quality tutorials in there.

  • http://www.allwebdesignresources.com/webdesignblogs/ Rachel

    Great tutorial … a keeper. You are doing a great job with Design Reviver, Vince!!

    Rachel
    AllGraphicDesign.com

  • http://www.kenya-portals.com/ CyberFox

    Great Resource!
    Many Thanks!

  • http://belinkddesign.com Kim H

    Very nice tutorial. Bookmarked!

  • http://seanja.com/blog SeanJA

    Nice… other than the scroll bar for the multiline tooltip, which I am going to put down to your blog theme rather than the code… ;)

  • http://ilovepss.blogspot.com/ ilovepss

    Thanks for the great tutorial

  • http://gdenarayana.com gdenarayana

    wowww, this is cool stuff :D

    i’m gonna try this in my test blog ;)

    thx for nice info here dude :)

  • http://whuzzah.com/ xaer8

    Hi, thanks for the most great and useful information you share here! Anyway, i would like to know more what if we can hover the mouse over the image and preview the big image, plus on click it will go to the respected external url of the image we set. Is it possible? I’ve seen this one on http://www.bestwebgallery.com. Please let us know if we can do this also. It will be a more useful addition to this article. Many many thanks in advance.

  • http://www.patrickortman.com Patrick

    Very useful, and fun- thanks!

  • http://www.transio.com Steven

    Awesome tutorial. Thanks for the tip!

  • Pingback: ??????? » [Web] ????

  • Pingback: Useful Javascript, jQuery, and AJAX Tutorials and Resources « Joren Rapini.com Weblog

  • http://www.standardxhtml.co.cc hirakumar

    Is it possible if i put image and html form on tooltip ?

  • Jess

    Hello,

    Great tip! Thank you! =)

    On Firefox 3.5, the code displays a scrolling sidebar. I’ve uploaded a screenshot here:

    http://tr.im/qc39

    Jess

  • Ernespo

    not work with imagemaps? i got tons of errors when try to use with image map links :) and even regular links, error when trying to use htm inside title :)

  • Pingback: Daily Digest for August 30th | More Than Scratch The Surface

  • Pingback: links for 2009-10-26 « Ikan66

  • Pingback: JQuery & CSS: ?????? ??????????? ????????? « ???? ? ??????????????

  • Pingback: 25 Useful Scripts for Tooltips | Vandelay Design Blog

  • Pingback: 35 Useful Scripts for Tooltips | JKookServ Hosting Blog

  • Pingback: 35 Useful Scripts for Tooltips | OnColorz Technology News - New Technology, Internet News, Software, Telecom, Computer Science

  • http://apus.edu evan

    Is it possible that as long as you keep your mouse on the object, the tooltip won’t move? otherwise the tooltip will blink and move all around the object and it’s a bit jaring… otherwise this was a great plugin!

  • Pingback: 8 Most Useful Jquery Plugin | Vishnu Valentino

  • Pingback: 10+ Useful jQuery Plugins « Nulls

  • Pingback: 37 Fenomenales jQuery Plugins y Demos para Desarrolladores | Proyecto Aurora

  • http://www.tamil-movie.net tamil movie

    cool its simple and nice

  • http://www.financial-compare.com James

    Nice tooltip. looks really effective on the black background.

  • http://www.e-profitbooster.com Dayanand

    Hi,

    This is the good tutorial as well as good presentation with comment .

    Dayanand from e-profitbooster

  • http://motionlook.es AmosLee

    Thanks for share, I think the same, the presentation and content its the best. I was looking for a tooltip tutorial or plugin in the jquery web site, you can upload this..

  • http://www.joyoohairextensions.com wholesale hair extensions

    Chinese virgin hair, Chinese virgin hair, Malaysian virgin hair. While we guarantee our products are 100% human hair, So if you have any demands in buying the hair products, you can contact us and we would like to answer you all the questions till you are satisfied.

  • http://www.yoyohair.com cheap lace front wigs

    Thanks for pointing it out, though, and thanks to everyone for the kind words of encouragement.

  • Pingback: jQuery tooltip scripts, 100+ best

  • Pingback: All You Need About Tooltip JQuery Tools, Best 100 !

  • Pingback: 25 Useful jQuery Tooltip Scripts | cs5 tutorials photoshop cs5 tutorials Flash cs5 tutorials cs5 tutorial cs5tutorials cs5tutorial