In Tutorials Oct 21, 200831
jQuery & CSS Tooltip Example
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:
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.
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.
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
31 Comments
Oct 21, 2008
Wow,,good article…
I must try it
thanks for share…
Oct 22, 2008
Now everyone is talking about the American economy and eclections, nice to read something different. Eugene
Oct 23, 2008
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.
Oct 24, 2008
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.
Oct 25, 2008
wow, great outcome, lovely detailed tooltip…thanks mate..:)
Oct 27, 2008
Very good tutorial. Thank you.
Nov 3, 2008
Like it,
Diego
http://www.corporatewebsolutions.net
Nov 5, 2008
Good Tutorial! It was chosen for the home page of http://www.tutorialsroom.com
Please submit all of your future quality tutorials in there.
Nov 5, 2008
Great tutorial … a keeper. You are doing a great job with Design Reviver, Vince!!
Rachel
AllGraphicDesign.com
Nov 11, 2008
Great Resource!
Many Thanks!
Nov 19, 2008
Very nice tutorial. Bookmarked!
Nov 19, 2008
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…
Nov 19, 2008
Thanks for the great tutorial
Dec 25, 2008
wowww, this is cool stuff
i’m gonna try this in my test blog
thx for nice info here dude
Jan 22, 2009
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.
Feb 11, 2009
Very useful, and fun- thanks!
Mar 25, 2009
Awesome tutorial. Thanks for the tip!
Apr 8, 2009
[...] jQuery & CSS Tooltip Example [...]
May 14, 2009
[...] jQuery & CSS Tooltip Example | jquery, tooltip [...]
May 29, 2009
Is it possible if i put image and html form on tooltip ?
Jun 29, 2009
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
Aug 6, 2009
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 
Aug 30, 2009
[...] Shared jQuery & CSS Tooltip Example | Design Reviver [...]
Oct 26, 2009
[...] jQuery & CSS Tooltip Example | Design Reviver (tags: jquery) [...]
Nov 27, 2009
[...] ???????? ?????? ????? ???????? ?????. [...]
Dec 2, 2009
[...] jQuery and CSS Tooltip 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. [...]
Dec 2, 2009
[...] jQuery and CSS Tooltip 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. [...]
Dec 2, 2009
[...] jQuery and CSS Tooltip 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. [...]
Dec 10, 2009
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!
Dec 11, 2009
[...] Demo [...]
Jan 24, 2010
[...] Simple Tooltips based on jQuery [...]
Leave a Comment