11 Excellent Solutions for Creating Tooltips

Posted by Henry Jones on Mar 10, 2009 | 31 Comments

Tooltips in web design are becoming more and more commonplace. Even though I don’t think they are appropriate for every type of site, they can be a very useful addition when implemented correctly. If you are planning on using tooltips in your next project, the hardest part may be choosing the right solution.

Here are 11 excellent methos for creating tooltips using various solutions such as jQuery, MooTools, and CSS only.

Prototip 2

Easiest Tooltip and Image Preview Using jQuery

Simpletip

Coda Popup Bubbles

MooTools 1.2 Tooltips: Customize Your Tips

Duplicate the jQuery Homepage Tooltips Using MooTools

jQuery Ajax Tooltip

CSS Bubble Tooltips

Easy CSS Tooltip

CoolTips

ToolTip_MooTools

Here's some other articles that you will definitely find useful.

20 Fresh CSS3 Tutorials

9 jQuery Mistakes you Shouldn’t Commit

8 Responsive jQuery Slider Plugins

10 jQuery Plugins to Enhance your User Interfaces

Basic Tips for Getting Started with jQuery Development

31 comments

Lee Milthorpe
March 10, 2009
These are nice, I’ve been looking for a cool tooltop for a while now so will check these out!
Reply
Bogdan
March 10, 2009
great ! really love your website, very relevant info on webdesign ! thank you !
Reply
Elliot
March 10, 2009
I have a tooltip solution at my site, relying only on jQuery
http://www.ilovecolors.com.ar/rollovers-tooltips-jquery/
Reply
Desiztech
March 10, 2009
Really nice toolstips…makes some work lot easier. Thanks
Reply
HatLord
March 10, 2009
Excellent list. Thank you sooooo much for taking the time to collect emm!
Reply
MohiganSun
March 10, 2009
great info, thanks
Reply
Timothy
March 10, 2009
MooTools all the way
Reply
christian
March 10, 2009
Nice Tooltips. Thanks
Reply
Team Nirvana
March 10, 2009
No, no, this is no way to simplify the task of creating tool-tips.

Come on, these tiny things have always been like a crack head for me and coming to this post, I find them to be so easy and after trying a few times, I have them at the back of my hand now.

Thanks a lot for sharing these.
Reply
Soh
March 10, 2009
Great round up!

I just put one up for your side nav

http://www.sohtanaka.com/web-design/side-navigation-tooltip-popup-bubble/
Reply
Dainis Graveris
March 11, 2009
pretty useful – I wasn’t aware how to use them exactly before, still now thanks for information
Reply
phx
March 11, 2009
Are there any tooltips for prototype?
(Except Prototip)
Reply
Feedweaver Your RSS reader
March 12, 2009
Cool stuff
Reply
Matthew
March 13, 2009
Man, I could have used this just last weekend. Thanks for these great tips, there’s a couple here I didn’t come across in my searches.
Reply
Marukirikilla
March 15, 2009
Nice selection!
I like it! I wish i could see this a month ago! =/ lol
Reply
naspinski
March 17, 2009
Antoher great one by the writer of simpleTip is qTip (jQuery):
http://craigsworks.com/projects/qtip/
Reply
Steve Reynolds
March 20, 2009
I did a Top 10 on this for jQuery only – check it out http://www.reynoldsftw.com/2009/03/10-excellent-tooltip-plugins-with-jquery/
Reply
newsmagazine
April 10, 2009
nice jQuery tutorials
Reply
Duvar Kağıdı
April 10, 2009
great info thanks..
Reply
Ankara Web Tasarım
April 29, 2009
Thanks.
Reply
Joabng
August 20, 2009
good share of the info. thanks
Reply
Pradeep CD
October 13, 2009
I was really looking for tooltips… thanks 4 sharing…:)
Reply
alyans
October 16, 2009
thank for sharing
Reply
Mr. Homepage
November 28, 2009
Fantastic! – i love the jQuery Ajax Tooltip!
Reply
Mr. Homepage
November 30, 2009
Sorry, wrong URL. Thank you one more time for this post, i really did not mind tooltips. But this is a cool way to fresh up your webdesign!
Reply
Matthew
December 6, 2009
Out of all the tool tips, you left out the best one:
jquery qtip
http://craigsworks.com/projects/qtip/
Reply
shoaib hussain
February 11, 2010
this is just awesome and is easy to use….
Reply
Jeffry
February 25, 2010
another suggestion is:

http://www.likno.com/jquery-tooltips/index.php

J.
Reply
Daniel
May 26, 2010
Very nice collection, thank you for your work!
Reply
sekspartner
June 3, 2010
great ! really love your website, very relevant info on webdesign ! thank you !
Reply
MBM
August 12, 2010
I used wz_tooltip in the past. But its discontinued, so here i found an alternative. Thank you.
Reply