11 Excellent Solutions for Creating Tooltips

By / Mar 10, 2009 / Resources

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

Prototip 2

Easiest Tooltip and Image Preview Using jQuery

Easiest Tooltip and Image Preview Using jQuery

Simpletip

Simpletip

Coda Popup Bubbles

Coda Popup Bubbles

MooTools 1.2 Tooltips: Customize Your Tips

MooTools 1.2 Tooltips: Customize Your Tips

Duplicate the jQuery Homepage Tooltips Using MooTools

Duplicate the jQuery Homepage Tooltips Using MooTools

jQuery Ajax Tooltip

jQuery Ajax Tooltip

CSS Bubble Tooltips

CSS Bubble Tooltips

Easy CSS Tooltip

Easy CSS Tooltip

CoolTips

CoolTips

ToolTip_MooTools

ToolTip_MooTools

About the Author

Henry Jones is a web developer, designer, and entrepreneur with over 14 years of experience. He is the founder of WDL and ThemeTrust.

  • http://www.smashandpeas.com/ Lee Milthorpe

    These are nice, I’ve been looking for a cool tooltop for a while now so will check these out!

  • Bogdan

    great ! really love your website, very relevant info on webdesign ! thank you !

  • http://ilovecolors.com.ar Elliot

    I have a tooltip solution at my site, relying only on jQuery
    http://www.ilovecolors.com.ar/rollovers-tooltips-jquery/

  • http://desizntech.info Desiztech

    Really nice toolstips…makes some work lot easier. Thanks

  • http://www.hatlord.com HatLord

    Excellent list. Thank you sooooo much for taking the time to collect emm! :)

  • http://www.mohigansun.net/ MohiganSun

    great info, thanks

  • http://www.pushingbuttons.net Timothy

    MooTools all the way

  • http://sociologiac.com christian

    Nice Tooltips. Thanks

  • http://teamnirvana.com/blog/ Team Nirvana

    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.

  • http://www.SohTanaka.com Soh

    Great round up!

    I just put one up for your side nav :-)

    http://www.sohtanaka.com/web-design/side-navigation-tooltip-popup-bubble/

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

    pretty useful – I wasn’t aware how to use them exactly before, still now thanks for information :)

  • http://puretec.wordpress.com/ phx

    Are there any tooltips for prototype?
    (Except Prototip)

  • http://www.feedweaver.net Feedweaver Your RSS reader

    Cool stuff

  • Matthew

    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.

  • http://www.leetside.com Marukirikilla

    Nice selection!
    I like it! I wish i could see this a month ago! =/ lol

  • http://naspinski.net naspinski

    Antoher great one by the writer of simpleTip is qTip (jQuery):
    http://craigsworks.com/projects/qtip/

  • http://www.reynoldsftw.com Steve Reynolds

    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/

  • http://authorcafe.net/ newsmagazine

    nice jQuery tutorials

  • http://www.duvarkagidi.gen.tr Duvar Kağıdı

    great info thanks..

  • http://www.turnatasarim.com Ankara Web Tasarım

    Thanks.

  • http://bloggerpinnacle.com Joabng

    good share of the info. thanks

  • http://www.cdpradeep.com/ Pradeep CD

    I was really looking for tooltips… thanks 4 sharing…:)

  • alyans

    thank for sharing

  • http://www.vianos.dechris Mr. Homepage

    Fantastic! – i love the jQuery Ajax Tooltip!

  • http://www.vianos.de Mr. Homepage

    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!

  • http://mhuntdesign.com Matthew

    Out of all the tool tips, you left out the best one:
    jquery qtip
    http://craigsworks.com/projects/qtip/

  • http://what-what.net shoaib hussain

    this is just awesome and is easy to use….

  • Jeffry
  • http://www.joomla-programmieren.de/ Daniel

    Very nice collection, thank you for your work!

  • http://www.seksarkadasi.com sekspartner

    great ! really love your website, very relevant info on webdesign ! thank you !

  • http://www.mbm-webdesign.de/ MBM

    I used wz_tooltip in the past. But its discontinued, so here i found an alternative. Thank you.