11 Excellent Solutions for Creating Tooltips

By / Mar 10, 2009 / Resources
shares

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.

31 Comments

  1. 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
  2. Bogdan
    March 10, 2009

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

    Reply
  3. 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
  4. Desiztech
    March 10, 2009

    Really nice toolstips…makes some work lot easier. Thanks

    Reply
  5. HatLord
    March 10, 2009

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

    Reply
  6. MohiganSun
    March 10, 2009

    great info, thanks

    Reply
  7. Timothy
    March 10, 2009

    MooTools all the way

    Reply
  8. christian
    March 10, 2009

    Nice Tooltips. Thanks

    Reply
  9. 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
  10. 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
  11. Dainis Graveris
    March 11, 2009

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

    Reply
  12. phx
    March 11, 2009

    Are there any tooltips for prototype?
    (Except Prototip)

    Reply
  13. Feedweaver Your RSS reader
    March 12, 2009

    Cool stuff

    Reply
  14. 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
  15. Marukirikilla
    March 15, 2009

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

    Reply
  16. naspinski
    March 17, 2009

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

    Reply
  17. 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
  18. newsmagazine
    April 10, 2009

    nice jQuery tutorials

    Reply
  19. Duvar Kağıdı
    April 10, 2009

    great info thanks..

    Reply
  20. Ankara Web Tasarım
    April 29, 2009

    Thanks.

    Reply
  21. Joabng
    August 20, 2009

    good share of the info. thanks

    Reply
  22. Pradeep CD
    October 13, 2009

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

    Reply
  23. alyans
    October 16, 2009

    thank for sharing

    Reply
  24. Mr. Homepage
    November 28, 2009

    Fantastic! – i love the jQuery Ajax Tooltip!

    Reply
  25. 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
  26. Matthew
    December 6, 2009

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

    Reply
  27. shoaib hussain
    February 11, 2010

    this is just awesome and is easy to use….

    Reply
  28. Jeffry
    February 25, 2010

    another suggestion is:

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

    J.

    Reply
  29. Daniel
    May 26, 2010

    Very nice collection, thank you for your work!

    Reply
  30. sekspartner
    June 3, 2010

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

    Reply
  31. MBM
    August 12, 2010

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

    Reply

Leave a Reply