Smashing Magazine we smash you with the information that will make your life easier. really.

40+ Tooltips Scripts With AJAX, JavaScript & CSS

By Smashing Editorial, June 12th, 2007 in Developer's Toolbox | 229 Comments | Forum

Web users love informative clues. Whatever questions and misunderstandings might occur - delivering precise answers immediately is the primary task a responsive user interface should be able to cope with. To do that, developers have to consider subtle and well-thought tooltips - used correctly, they can greatly improve user experience and help users to get things done. In Web such “responsive” hints can be provided by tooltips. E.g., unclear input fields in web forms are perfect examples of a situation you might be willing to use a tooltip for.

Most of solutions are JavaScript- and AJAX-based, however we’ve also managed to find some lightweight CSS-based solutions. To install and use the script, it’s often enough to include the JavaScript library in the source code and provide the hint as plain text within the “title”-attribute. Sometimes you can also insert URLs, images, tables and further elements - basically, it can be almost everything you’d ever wanted it to be.

We’d like to thank Jurgen Koller for compiling an extensive list of tooltip scripts we’ve stumbled upon during our search. It gives many useful pointers, but we’ve managed to find some more. You might be willing to use Koller’s post as a quick reference for your search.

Let’s take a look at 43 handy tooltips scripts for intuitive and well-designed visual clues. It’s nice to have them all in one place, once you need them. It’s nice to be able to find them, once you don’t have time to search for them.

Tooltips: AJAX & JavaScript Solutions

Nice Titles Revised
An improved Nice Titles Tooltip Script with Accesskeys support.
A lightweight prototype based JavaScript tooltip
Nice Titles
A classic. The script uses a background image.
AJAX-enabled Help-BalloonsHelp windows in baloon-design. AJAXified version is also available.
jTip – A jQuery Tool Tip
Extensive AJAX-based tooltips with numerous functions and presentation possibilities.
jQuery plugin: Tooltip
Enhances the jQuery Library.
qTip
Works for all elements, not only for links in most browsers - IE 5.5+, Firefox, Safari and Opera.
Form field hints with CSS Tooltips
t’s a basic example of how helpful a little JavaScript and CSS can be in a form. Instead of the input hints always showing and potentionally cluttering a very simple form, only the hint for the currently focused input will show. This article will show a way to do this.
JS Tooltip
Displays customizable tool tip message for each link element on a web page. A tool tip that can be added to the anchor element unobtrusively by adding a class value to it. This was done by having the tool tip message pull from the specific title attribute of the anchor element that the tool tip was added too.
BoxOver
Flexible DHTML-Tooltipp in numerous formats. Appears (almost) immedately and fades in during loading.
SuperNotes
Converts footnotes to tooltips. Appears immediately and can be assigned with a fixed position in the browser window.
Tipster
Multifunctional tool tips with JavaScript.
5 Tooltips by DHTMLGoodies
First version is suppose to improve the usability of online forms:
The second technique uses AJAX.
Walter Zorns JavaScript, DHTML Tooltipps
These tooltips can be used for different purposes; the code is well-documented and can easily be improved and modified.
clueTip
This is a demo page for the new clueTip — a jQuery-based, AJAX-powered tooltip. The clueTip plug-in was inspired by Cody Lindley’s jTip script.
Mootools Tooltip
Mootools Javascript example of using tooltips.
Sweet Titles
JavaScript Fading Tooltips.
Hover Tip
Tooltip with menu-like capabilities. The tooltip layer will remain visible while the viewer hovers over it. This allows you to place clickable links inside tooltip content.
Multiline Tooltip with HTML, CSS and JavaScript
This document explains how to make nice multiline tooltip for HTML documents, using simple and standard CSS, HTML and JavaScript.
overLIB
This JavaScript-library can be used in a variety of ways; many positioning and appearance features are available.
Scriptaculous Effect.Tooltip
The tooltip script from the script.aculo.us library.
Tooltip.js
Tooltipps with AJAX. The library uses the Prototype JavaScript Framework. The demo doesn’t work any longer.

CSS-Based Solutions

CSS Tooltips
A simple demonstration of using custom CSS tooltips as a drop-in replacement for the browser-based title attribute.
CSS Technique for Tooltips
CSS can create “faux tooltips” much the same as the JavaScript ones, but without all the (possibly) undesirable scripting. There are a few in’s and out’s involved, but surprisingly, the methods are rather easy to accomplish.
Unobtrusive and Slightly Accessible CSS Tool Tips on Semi Transparent CSS Menus
The scripts creates half-transparent tooltips with shadows.
CSS Menu Descriptions
This is a CSS technique that could be useful if you want to give users accessible added content such as tool-tips, notifications, or alerts, without adding unnecessary clutter to your page. And since it doesn’t rely of JavaScript, it should be useful to everyone, even disabled users.
Balloon Tooltip Demonstration
Balloon tooltip demonstration.
CSS Tooltipps, lixlpixel Javascript Tooltips
Similar scripts from the same source:
CSS Rollovers for Tooltips
CSS Bubble Tooltips
This example will show you how well this tooltip stretches for long descriptions.
Pure CSS Tooltips I
Simple, accessible “more” links - v2
CSS-based solution for displaying tooltips.
$Tooltips Scripts - Simple, accessible \$
CSS Tooltips
Another solution, based only on CSS.
Information Balloon PopUps
Stu Nicholls delivers another CSS-based solutions.

Further Solutions

Snap.com
Snap gives you a visual preview of each result before you click on it. And that improves your odds of picking the right search, without clicking back-and-forth several times.
DHTML Tooltips
Popup a help tip or information layer onmouseover using this object-based DHTML tooltip code. The basic version, presented on this page, can contain plain text or rich html, images, or images and text. The tooltip can be displayed over a background image. It can move with mouse movement. And it is easy to customize and modify.
Animated Tooltip Javascript
DOM Tooltip
DOM Tooltip Script-Library
Yahoo! UI Library: Tooltip
The Yahoo! UI Library Toolbox provides among other functions also tooltips.

Tooltips: Wordpress-Plugins

WP - Bubble Tooltips (Plugin)
A Wordpress-Plugin can change the appearance of links. Based on Bubble Tooltipps developed by Web-Graphics.
FancyTooltips
Further Wordpress-Plugin with similar functionality.
Fancy Tooltips

Selected Scripts: Quick Overview

Tooltips Scripts - A lightweight prototype based JavaScript tooltip

Published in Developer's Toolbox, June 12th, 2007
Tags: ajax, CSS, javascript, techniques, tooltips

1.

Super Chinois (June 12th, 2007, 9:40 pm)

Thanks!

I prefere CSS based solution :)
2.

Diallo (June 12th, 2007, 9:44 pm)

Nice, always a need for a good tool tip, especially strictly css based.
3.

amahony (June 12th, 2007, 9:47 pm)

Once again great article! Thanks
4.

Ryan Scherf (June 12th, 2007, 9:54 pm)

yawn. what about title=”". Not dependent on JS.
5.

Ray Cheung (June 12th, 2007, 10:14 pm)

True collection of tooltips…..Crazy well done…
6.

Paul Rouke (June 12th, 2007, 10:25 pm)

A very thorough article indeed (as always I hasten to add!). I’ve recently posted an article entitled Link [www.paulrouke.co.uk] which touches on some of the methods explained here, although the main focus of my article is around the checkout process and form completions, with this being such a crutial aspect to the conversion and drop out rates of e-commerce sites across the board.

Keep up the excellent work!
7.

Rob K (June 12th, 2007, 10:41 pm)

Nice!
CSS RoX!
8.

Lapin (June 12th, 2007, 10:51 pm)

One day, the whole internet will be on tool tips … eating our megahertz and killing the pleasure to move the mousse over.
9.

Quakeulf (June 12th, 2007, 10:59 pm)

The tooltips are in your base already, killing your dudes!

I personally do not prefer such overly elaborate tooltips. They are ok if they are toned down and only applied where it counts, like when you really doubt a user’s ability of handling text areas.
10.

criticalerror (June 12th, 2007, 11:45 pm)

I don’t like or recomend the use of javascript, because each browser have diferent ways on handling javascript, sometimes you can see huge diferences in diferent versions of the same browser, css it’s more standard so i prefere CSS….

But, good selection any way!!!
11.

plasebo (June 13th, 2007, 1:26 am)

The best one is from nicertitle> The best tooltip should be easy to implement without the need to create separate div containers to add the text of the tooltip. The nicertitle tooltip is exactly the one that would suit everyone’s need. Just fill the title attibute, that’s enough…
12.

Jürgen Koller (June 13th, 2007, 2:31 am)

Thanks guys for the back link to my site, love your lists. :)
Jürgen
13.

Tom D (June 13th, 2007, 2:57 am)

awesome - as always! so handy to know these articles are out there when a project needs them. great blog, made it to the main tab of my igoogle :)
14.

Blue Buffalo (June 13th, 2007, 3:04 am)

Sweet! Thanks for all the great tool tip scripts.
15.

Jen (June 13th, 2007, 3:53 am)

A few of these are “old”, but.. most of all are good.. I need to sort through my bookmarks.. I have like 40+ “collections of good stuff”… ;P
16.

360innovate (June 13th, 2007, 5:07 am)

Great article, Pretty confident I will be referring to it a lot in future!
Thanks
17.

Matthew (June 13th, 2007, 6:30 am)

Considering the way people use “tool tips” for inline advertising, I treat them the same way as I do pop-ups - get rid of them ASAP. I think Lapin’s right; if tool tips take over, I’m starting to navigate with my keyboard.
18.

TJ (June 13th, 2007, 7:36 am)

Sweet Jesus, a twofer. We’re looking to add some tips to TekTag, and this is a nice potpourri. Plus we’ve added it to our CSS bookmarks for our CSS subscribers. Thanks.
19.

Andrew Swihart (June 13th, 2007, 8:50 am)

I find these tooltips to be one of the “new annoyances” of the web. Please use only CSS based solutions if you must use tooltips, and include an option to turn them off if you are using them all over the place. Thank you
20.

Robert (June 13th, 2007, 10:26 am)

Jen, please publish your “collection of good stuff” :-)
Would be very greatful for it!
21.

Acronyms (June 13th, 2007, 1:40 pm)

Would be good to add some guidelines for those people who has no idea how to make tool tips to look attractive and not annoying.
22.

faizan (June 13th, 2007, 1:46 pm)

like usual thank you smashing magazine :)
23.

Nibbler (June 13th, 2007, 3:38 pm)

What about the classic “title” attribute you can use in all existing tags? It’s the best tooltip to use: no css/javascript or whatsoever, search engines can read it, it adds metadata to your content, and all users know its use from Windows.

Just make a span-tag, maybe give it a different style, and use the ‘title’ attribute in it.
24.

Mac (June 13th, 2007, 4:52 pm)

Thanks, great selection
25.

shery (June 13th, 2007, 5:52 pm)

thanks for you efforts
i know a website just full with ajax project and it’s all free
Link [www.ajaxdaddy.com]
26.

Phil (June 13th, 2007, 6:00 pm)

I think you missed one of my faves — CSS-based tooltips from Stu Nicholls at CSSplay.

Link [www.cssplay.co.uk]
27.

Hjalmar (June 13th, 2007, 6:41 pm)

Good article :)
28.

Le Tung Lam (June 13th, 2007, 8:35 pm)

Nice Write Up.

There are more Ajax lib at Link [miniajax.com]

Hope it Useful.
29.

dotty (June 13th, 2007, 9:17 pm)

You know the screenshot of the ‘Snap.com’ one? Where did that come from? Which site?
30.

Sainath K M (June 13th, 2007, 9:49 pm)

This was of great help……
31.

Adrian (June 14th, 2007, 3:07 am)

Holly smokes! So many tooltips - so much more annoyance :-(
32.

anty (June 14th, 2007, 7:03 am)

I didn’t know, that there are so many tooltip-code-snippets out there.
But I don’t really like most of them. I think one reason is, that they use all a non-default design.

In my point of view, the user should always get the default look and feel. If the title-tag is not enough for some advanced cases, then I will fall back to non-default ways to achieve my goal.

What I really like is the form-field-tooltip. This is very useful, but not a real tooltip in my opinion. But I will think about it, when I design my next form.

Keep the good posts comming ;)
33.

P Chen (June 14th, 2007, 7:53 am)

Wow awesome resource… was just about to go around and search for some tooltip examples
34.

chazzuka (June 14th, 2007, 11:52 am)

yet another great list from smashingmagazine, i prefer CSS based, just incase javascript is disabled.
35.

Lee (June 14th, 2007, 6:49 pm)

Great selection, thanks.

I’m curious though, is there any way of retrieving screen shots of sites without using Snap.com?
36.

Motorcycle Guy (June 14th, 2007, 9:09 pm)

As much as everyone here is bashing on js tooltips it seems that those intext ads that are similar to tooltips have no problems working no matter what browser i’m on.
37.

Dmitry Sheiko (June 14th, 2007, 9:46 pm)

Another one - AJAX-based Thesaurus Tooltip (
Link [cmsdevelopment.com] ). By the way it’s got PHP Programming Innovation Award November 2006 on phplasses.org
38.

Harel Malka (June 15th, 2007, 1:56 am)

Another one is rightContext. More of a context menu but since it can be triggered by roll overs it can also be used as a suprecharged tooltip.

Link [www.harelmalka.com]

Harel
39.

Steven (June 15th, 2007, 6:25 am)

I prefer CSS. Thanks for the list!
40.

Digilee (June 15th, 2007, 7:08 am)

Why bother building in tooltips?
Just add a title and/ alt tag to each image or link.

Much easier!
41.

Filosof (June 16th, 2007, 3:34 am)

Whatabout Link [dero.name]? (web is in Czech only.. just hover some link or abbr…)
42.

Andre (June 16th, 2007, 5:16 pm)

Great list n resource. Damn cool! Thank you! That’s what i needed actually.
43.

Raman (June 17th, 2007, 1:01 am)

Have a look at track-issue.com, which is Ajax enabled, built on asp.net, prototype and scriptaculous frameworks. This site offers free issue tracking system
44.

women blog (June 19th, 2007, 8:06 pm)

Link [www.miniajax.com] just useful reference. A showroom of nice looking simple downloadable DHTML and AJAX scripts
45.

Frank (June 22nd, 2007, 8:13 pm)

Here’s another nice tool tip / website image preview - Link [www.artviper.net] or Link [www.artviper.net], it shows an image of the website the link goes to and in addition the title tag as description. Mootools based.
46.

Ciro CgBlog (June 30th, 2007, 12:45 am)

Oh yes!!! This is the article I was waiting for! ;) great!
47.

venkatesh (July 2nd, 2007, 7:29 pm)

Hi I just want to ask how can I add a heperlink in CSS Bubble tooltip which takes to you another page. I have tried it but I could not solve the problem. Can you please help me out with this problem.

As I tried when take mouse on the bubble tool the text remained unselected.

Thanking YOu IN Advance.

venky
48.

Erick S. (July 2nd, 2007, 10:35 pm)

WOW! This is bookmarked! I really like this ToolTip pimpin’!
49.

Datarunner (August 31st, 2007, 1:07 am)

Hi, could you please remove these advertisements ? It’s quite disturbing to get redirected to a site where the “sourcecode” is directly connected to urls of the creators, who mostly have created these scripts just to get famous with their url, although the original sourcecode is available everywhere. Anyway, nice work.
50.

Seich (September 25th, 2007, 12:41 pm)

woah! great list i found the script i was looking for thanks a lot!
51.

Manjunath (November 26th, 2007, 6:17 pm)

the following code works when the mouseovers on the box,but i want tooltip to be displayed when mouseoverson options,can pls somebody help,i am new to javascript and i am facing this problem

function ShowToolTip(ToolTipText,index) {
var MyToolTip=document.all["DHTMLToolTip"];

MyToolTip.innerHTML=ToolTipText;

MyToolTip.style.visibility=”visible”;

return true;
}

function HideToolTip() {
var MyToolTip=document.all["DHTMLToolTip"];

MyToolTip.style.visibility=”hidden”

return true;
}

Off
Low
Med.
High
52.

shochan88 (December 23rd, 2007, 3:19 pm)

a very nice tootips , thank you
53.

Waclaw (December 26th, 2007, 6:26 am)

WOW! Crazy! And what we to do?! Copies?
I prefer AJAX - maybe sometimes disabled - but over 70% ON!
54.

Ahsan Khurshid Rathore (February 5th, 2008, 10:27 pm)

Really very useful article, and very cool tooltips. Great!
55.

Beau Scott (March 3rd, 2008, 9:13 am)

FYI,
I’ve updated the “Ajax-Enabled Help Balloons” component to version 2.0 (now called just HelpBalloon.js).
Enjoy!

Beau Scott
56.

PoLR.co.uk (April 13th, 2008, 2:16 am)

Excellent article, used a few of these before but the article has opened me up to lots of new ideas. Thanks.
57.

Jana (April 17th, 2008, 7:35 pm)

Really, the above collections are amazhing, its very userful for me and will show different views from others.i got a lot of new ideas because of refered this collections.Great..
58.

adi wirawan (April 20th, 2008, 10:19 pm)

the right tutorial in the right time, thanks
59.

joe (May 27th, 2008, 6:46 am)

i like all bro, that’s nice effect for ur eye
60.

Aimen Z (July 3rd, 2008, 6:30 am)

Very Complete, Thanks !
61.

Mohammad Zargaripour (July 3rd, 2008, 3:17 pm)

Very good
Tanx
62.

Ben (July 18th, 2008, 1:24 pm)

Pop goes the tooltip! Yay! =]
63.

Guilherme Mattos (August 8th, 2008, 5:38 am)

Fantastic!
64.

Richard Hughes (September 12th, 2008, 1:24 am)

This list has been a major help. I have been looking all over the net for decent tooltips. I appreciate this site as it highlights that which deserves to be highlighted. Nice work!
65.

Farheen (September 16th, 2008, 11:20 pm)

Wow………..!
Great… n CSS really rocks..
Thnx….
66.

diseño web (September 17th, 2008, 10:46 pm)

good!!! :)
67.

chokilala (September 26th, 2008, 1:59 am)

nice! i always use sweet titles. now i can have more options. thanks for that :)
68.

angkorboy (October 9th, 2008, 1:57 am)

thanks you very much for important sources: i use at my website Cambodia Tourism
69.

randyyanuar (October 18th, 2008, 4:36 am)

very very useful… thanks guys…….
70.

子非鱼 (November 6th, 2008, 10:15 pm)

thank you！
71.

good javascript tooltips (November 19th, 2008, 3:18 am)

good javascript tooltips Link [www.Scriptremix.com]
72.

web (November 28th, 2008, 1:38 pm)

Amazing article!!! But why it is not popular? They’re have bad luck I think.
73.

Yustian (December 6th, 2008, 4:06 pm)

Wooow very complete list of tooltip javascript. I’glad for this information. Smashing Magazine is the best source information in the Net :). And i’m choose Mootools Tool tips for include into my Website.Couse this tooltip very simple and elegant . One again i say thanks.
74.

mobilya (December 21st, 2008, 2:26 am)

Wooovv Very Good Tooltips script thx.
75.

Bebelisto (December 23rd, 2008, 12:30 am)

How do you create a horizontal scrollbar in a listbox: ASP.NET of course using CSS
76.

Eddie (December 24th, 2008, 11:29 am)

AJAX and Javascript is redundant since AJAX is Asynchronous JavaScript And Xml.
77.

web hosting (December 27th, 2008, 3:53 pm)

thanks for these useful codes
78.

webhosting (December 27th, 2008, 4:47 pm)

they are great tool
79.

Tung (January 11th, 2009, 7:35 pm)

I prefer CSS based solution. Thanks anyway
80.

Dean (January 21st, 2009, 3:55 am)

nice set, i am a little javascript heavy at the moment so a cs solution looks like the way to go
81.

opreker (February 1st, 2009, 9:30 am)

thx for the information :)
82.

Michael Locke (March 9th, 2009, 4:06 pm)

Nice!
83.

web dizayn (March 11th, 2009, 3:51 pm)

great article thanx.
84.

Anton (March 12th, 2009, 4:37 am)

There is one more nice tooltip - Link [www.taggify.net] . It allows to add tooltips for the part of the image -border is drawn around the object on the image and other parts it’s faded. Cool thing for marking people on the photo as in facebook .
85.

Sumanth (March 13th, 2009, 4:58 am)

I think the word WOW suites for this Post Simply Super
86.

shiv (March 19th, 2009, 4:39 am)

how to have links in bubble tooltip.. can u give some idea..
87.

bormos (April 7th, 2009, 12:37 pm)

Im looking for a tooltip which can display contents of .txt file on my server. Any recommendations?
88.

Catzie (April 29th, 2009, 2:15 am)

Hey, this helps a lot. Thank you. :D
89.

Erkan (May 30th, 2009, 4:17 am)

O ye mi kuzze ve go. Zupper olmis bu
90.

Sean (June 20th, 2009, 2:38 pm)

Hi, Link [ajaxden.net] is also a good site for free AJAX scripts!
91.

Nathan Lounds (June 26th, 2009, 7:58 am)

Thanks for a very nice collection to tooltip tools. I’ve done a lot of searching and this is the most comprehensive I’ve found. I’ve created a tool that might interest some of you. It generates tooltips from a glossary you create in a text file . It has been used primarily in online courses at the university I work for. Link [code.google.com].