15 jQuery Plugins To Create A User Friendly Tooltip

Jun 22nd, 09 by Dicky | View Comments |
You maybe interested in our latest article Personal Facebook Fan Pages of Celebrities.

Tooltip is a good way to show extra information when user hovers the cursor over an element. The “hover box” will appear when the mouse hover in, and disappear when the mouse hover out.

If the tooltip is being used appropriately, it can improve our site’s user friendly level, and also save us a lot of spaces. Today, we are going to see 15 jQuery plugins to create an user friendly tooltip.

1. qTip

qTip is an advance tooltip plugin which provides tonnes of features like rounded corners and speech bubble tips.
qtip

2. jQuery Tools/Tooltips

This tooltip plugin can contains any HTML element such as links, table, forms, and images. Implementing this plugin is very easy. The default effects are sliceup and toogle. However, you can easily build your own effects.
jquery-tools-tooltips



3. Simpletip

Simpletip allows you to create tooltips with ease on any element on the page using the power of jQuery’s selectors and event management. The tooltips can be static, dynamic, or even loaded through AJAX with a variety of different visual effects.
simpletip

4. jQuery (mb)Tooltip

jQuery (mb)Tooltip is a beautiful alternative tooltip which is depended on jQuery timers and dropshadow plugins. It has a lot of options for different needs.

5. EZPZ Tooltip

It is flexible enough to customize the look and feel without requiring the bloat of any CSS or images. Hover targets should be mapped to their content counterparts by convention.
ezpz-tooltip

6. jQuery Input Floating Hint Box

It provides an automatic box hint in the right side of an input, when focus on that input, and disappear when focus go (blur).
iquery-input-floating-hint-box

7. HTML Tooltip

Inline HTML Tooltip lets you define rich HTML tooltips that are embedded directly inside your webpage and that appear when the mouse rolls over links on your page. The tooltip appears directly beneath the anchor link, and adjusts its position dynamically based on whether the mouse is too close to the window’s edges.
html-tooltip

8. Orbital Tooltip

With the Orbital Tooltip you can choose to position the tooltip on any object in a 360 degrees around it.
orbital-tooltip

9. Tipsy

Tipsy is a jQuery for creating a Facebook-like tooltips effect based on an anchor tag’s title attribute.
tipsy

10. clueTip

The clueTip plugin allows you to easily show a fancy tooltip when the user’s mouse hovers over (or, optionally, clicks on) any element you designate in your script.
cluetip

11. jTip

jTip pulls content into a tool tip using the HttpXMLRequest object. By adding a class attribute value of “jTip” to a link element you can create a tooltip from the content found in the file the href is pointing too.
jtip

12. BeautyTips

BeautyTips is a simple-to-use balloon-help style tootip plugin. Any element on the page can be set to show a talk-balloon containing any text or HTML on hover, click, or any bindable event.
beautytips

13. Hovertips

The hovertip plugin is quite flexible. With a little javascript, you can customize which nodes become the tooltips and which targets activate them.

14. BetterTip

BetterTip is a plugin for the JQuery library that allows you to create custom tool tips. It is based on  Cody Lindley’s jTip, but it is much more flexible.
bettertip

15. jqTooltip

The jQuery Tooltip Plugin allows you to easily create tooltips with ajax content.
jqtooltip

We regularly update articles about resources, tutorials and Wordpress to help designers and developers. If you are new to WebDesignBooth, why not subscribe to our RSS feed and get the latest updates immediately. You can also subscribe through email or follow us on Twitter.
  • http://craigsworks.com Craig Thompson

    Thanks for including qTip in your line-up! Always a pleasure to see your work up their in the ranks, especially first!

    If you need any support make sure to checkout the website forums or drop me a line.

  • http://www.gigglecomputer.com Phaoloo

    Catch readers’ attention with these friendly tooltips :)

  • http://popurls.com/pop popurls.com // popular today

    popurls.com // popular today…

    story has entered the popular today section on popurls.com…

  • http://www.eventguiden.se Svensexa

    Great list, thanks! :-)

  • http://system42.net mb

    Grammar police: “a User Friendly”

    http://owl.english.purdue.edu/owl/resource/540/01/

  • http://www.alexcrooks.co.uk Alex

    Awesome post again mate keep it up!!

  • Jimmy Dean

    OMgosh dude, those are some cool tools for sure!

    RT
    http://www.anon-tools.tk

  • http://www.netcrema.com/?p=4908 15 jQuery Plugins To Create An User Friendly Tooltip « Netcrema – creme de la social news via digg + delicious + stumpleupon + reddit

    [...] 15 jQuery Plugins To Create An User Friendly Tooltipwebdesignbooth.com [...]

  • barry

    Great Post!

    Theres a cool ToolTip script at http://ajaxden.net/tag/tooltip/

  • http://www.squico.com/2009/06/22/15-jquery-plugins-to-create-an-user-friendly-tooltip/ 15 jQuery Plugins To Create An User Friendly Tooltip | Squico

    [...] In: JQuery plugins 22 Jun 2009 Go to Source [...]

  • http://benjaminkelly.co.uk/?p=142 Have a bell | Web Strategy for Businesses

    [...] 15 tool tips using jQuery [...]

  • http://www.webdesignbooth.com dicky

    Thanks barry, the script is cool. I should create another post and list all cool tooltip scripts which are not using jQuery.

  • http://www.webdesignbooth.com dicky

    hi mb,
    Thanks for pointing out my grammar mistake.

  • http://www.webdesignbooth.com dicky

    Hi Craig,
    both your qTip and Simpletip are awesome! I’ll find a chance and use it in my project. If you have any great tool/plugin, do let me know and i will try to include in my future post.

  • http://www.gimliglider.com/ GimliGlider

    Bookmarked!!

  • http://bellybuttons.tumblr.com Tyrone

    Thanks for posting this. Jquery is a great add-on, and tooltips can improve users’ experiences.

  • http://www.diywebhosting.ca/blog/2009/06/23/tech-news-highlights-june-16-22-2009/ Tech News Highlights: June 16 – 22, 2009 « D.I.Y. Web Hosting Blog

    [...] iPhone 3GS sales top 1 million. – More BitTorrent users go anonymous. – 15 jQuery plugins to create an user friendly tooltip. – How to use the 40 best features of iPhone 3.0. – MySpace slashes 30% of [...]

  • http://www.gimliglider.com/ GimliGlider

    I want to add any of these mentioned above as a plugin to my wordress 2.7.1 installation. is there a way to do so? it’s gonna be a real hassle to manually add the plugins, configure etc etc

  • http://zyzik.wordpress.com/2009/06/23/fresh-links/ Fresh Links =) « Adrian Zyzik’s Weblog

    [...] Essential Front End Web Developer Cheat Sheetstripwire mag 15 jQuery Plugins To Create An User Friendly Tooltip Outside the Box Navigation with jQuery – Nettuts+ 40 Sources To Download High-Quality Free [...]

  • http://yloz.eu/2009/06/23/15-felhasznalobarat-jquery-tooltip-plugin/ 15 felhasználóbarát jquery tooltip plugin | Yloz féle zacc

    [...] 15 jQuery Plugins To Create An User Friendly Tooltip VN:F [1.4.6_730]please wait…Rating: 0.0/10 (0 votes cast) Share and Enjoy: [...]

  • http://designm.ag/news/15-jquery-plugins-to-create-a-user-friendly-tooltip/ 15 jQuery Plugins To Create A User Friendly Tooltip

    [...] Visit Source. [...]

  • Paul J

    vtip, is another one.

    http://www.vertigo-project.com/projects/vtip

    i have used it and works pretty well.

  • http://cssbrigit.com/CNews/entrada/2009062219090466 CSS Brigit | 15 jQuery Plugins To Create A User Friendly Tooltip

    15 jQuery Plugins To Create A User Friendly Tooltip…

    This article will shows you various jQuery plugins to implement nice tooltip….

  • http://www.webdesignbooth.com dicky

    Hi Paul,
    Thanks for sharing this great plugin!

  • http://www.webdesignbooth.com dicky

    Hi GimliGlider,
    I am not aware of such plugin. Do you search through WordPress plugin database?

  • http://www.bitlimakina.com bitlimakina

    thank for sharing. My tooltip is here–> http://www.bitlimakina.com/baloncu-geldi

  • http://internetmakingmoney.wordpress.com/2009/06/23/15-jquery-plugins-to-create-an-user-friendly-tooltip/ 15 jQuery Plugins To Create An User Friendly Tooltip « Internet Making Money
  • http://design-newz.com/2009/06/23/15-jquery-plugins-to-create-an-user-friendly-tooltip/ 15 jQuery Plugins To Create An User Friendly Tooltip | Design Newz

    [...] 15 jQuery Plugins To Create An User Friendly Tooltip [...]

  • http://0ddn1x.wordpress.com/2009/06/23/tooltips-with-jquery-plugins/ Tooltips with jQuery plugins « 0ddn1x: tricks with *nix

    [...] with jQuery plugins Filed under: Technology — 0ddn1x @ 2009-06-23 20:20:54 +0000 http://www.webdesignbooth.com/15-jquery-plugins-to-create-an-user-friendly-tooltip/ Leave a Comment TrackBack [...]

  • http://randsco.com stk

    jQuery can provide some clickable tooltips with some nifty animation, but how many of these degrade “nicely” if javascripting is disabled?

    Alternatively, why rely on javascript at all for a tool-tip.

    Consider popINFO – a pure-CSS tooltip method.

    Cheers.

  • http://makingmo257.publr.com/ MakinMo’s Tech Blog

    [...] plugins is fast and easy. Today, we are going to see 15 jQuery plugins to implement tooltip.Source:http://www.webdesignbooth.com/15-jquery-plugins-to-create-an-user-friendly-tooltip/ Jun [...]

  • http://identi.ca/notice/5679351 makin257′s status on Tuesday, 23-Jun-09 22:54:22 UTC – Identi.ca
  • http://www.yellowpark.net/cdalby/index.php/2009/06/23/links-for-2009-06-23/ links for 2009-06-23 | Chris Dalby Untangles Networks

    [...] 15 jQuery Plugins To Create An User Friendly Tooltip 15 jquery tool tip plugins (tags: jquery tooltip) [...]

  • http://www.webdesignbooth.com dicky

    Hi bitlimakina,
    you have a great tooltip, but do you have any English version of your page, so that we can read your documentation?

  • http://digi3.rockweb.com/2009/06/15-jquery-plugins-to-create-a-user-friendly-tooltip/ 15 jQuery Plugins To Create A User Friendly Tooltip « rockweb

    [...] DIRECT LINK » [...]

  • http://mandarine.wordpress.com/2009/06/24/links-for-2009-06-23/ links for 2009-06-23 « Mandarine

    [...] 15 jQuery Plugins To Create An User Friendly Tooltip (tags: jquery plugin webdesign list tutorial) [...]

  • none

    why not fix it then? :)

  • http://www.webdesignbooth.com dicky

    Sorry a bit busy yesterday. But i had fixed it.

  • http://www.sonichtml.com/en/ sonichtml

    Nice thank you for shared…

  • http://www.webmaster9.com/2009-06/110-jquery-tutorials-plugins-tips-and-resources.html 110+ jQuery Tutorials, Plugins, Tips and Resources | Webmaster 9

    [...] 15 jQuery Plugins To Create A User Friendly Tooltip [...]

  • http://v6.capsule.org/blog/links-for-2009-06-24/ links for 2009-06-24

    [...] 15 jQuery Plugins To Create An User Friendly Tooltip (tags: webdesign javascript tooltip jquery) Socio-Encapsule this: [...]

  • http://www.cssgalleries.com/2009/06/links-for-the-day-5/ Links for the day | CssGalleries

    [...] 15 jQuery Plugins To Create A User Friendly Tooltip [...]

  • http://designreviver.com/general/weekly-design-news-round-up/ Weekly Design News Round Up | Design Reviver

    [...] 15 jQuery Plugins To Create A User Friendly Tooltip [...]

  • http://www.egracecreative.com/2009/06/28/my-favorite-design-links-of-the-week-5/ My Favorite Design Links of the Week | eGrace Creative Web Solutions

    [...] 15 jQuery Plugins To Create An User Friendly Tooltip [...]

  • http://www.webdesignbooth.com dicky

    Hi stk,
    popINFO is a cool tooltip, thanks for sharing!

  • http://www.jaceju.net/blog/?p=605 網站製作學習誌 » [Web] 連結分享

    [...] 15 jQuery Plugins To Create An User Friendly Tooltip [...]

  • http://randsco.com stk

    Dicky – Thanks for saying & you’re welcome. ;-)

  • http://www.love-help.org/love-advice/ Lonely Lover

    and this is why jquery is superior

  • http://bm.s5-style.com/index.php/20090729/3858 links for 2009-07-28 « Webデザインのリンク集 Webデザインポータルサイト S5-Style

    [...] 15 jQuery Plugins To Create A User Friendly Tooltip [...]

  • http://divitodesign.com/community/community-news-headlines-july-09/ Community News Headlines – July ‘09 « DivitoDesign

    [...] 15 jQuery Plugins To Create A User Friendly Tooltip This article will shows you various jQuery plugins to implement nice tooltip. [...]

  • juan

    this jquery plugin is very easy create popup
    jQPOOOP the web is http://www.dieroboter.com/jQPOOOP

  • http://www.elwebmaster.com/articulos/guia-de-usabilidad-para-principantes-en-8-pasos Guía de usabilidad para principantes en 8 pasos – elWebmaster.com

    [...] la imagen on Mouseover. Si las imágenes son pesadas para realizar sprites CSS o rollover utiliza jQuery tooltip para hacer un sitio amigable con el [...]

  • http://www.alphawavemedia.co.uk/wp/2009/09/have-a-bell/ Have A Bell | Alpha Wave Media

    [...] What I’m going to suggest is adding tool tips. Add them sparingly, but put them in. They help. People like them. And you might as well make them pretty whilst you are at it: 15 tool tips using jQuery [...]

  • http://www.lacnywebhosting.com LacnyWebHosting

    Great article, adding it to my bookmarks!

  • http://www.distrogeek.com/guia-de-usabilidad-para-principantes-en-8-pasos/ Guía de usabilidad para principantes en 8 pasos | Distro-Geek…

    [...] la imagen on Mouseover. Si las imágenes son pesadas para realizar sprites CSS o rollover utiliza jQuery tooltip para hacer un sitio amigable con el [...]

  • http://www.geeksucks.com/showcases/14-great-posts-on-jquery-plugins.htm 14 Great Posts on jQuery Plugins – Showcases – Geek Sucks

    [...] 1. 15 jQuery Plugins To Create A User Friendly Tooltip [...]

  • http://www.styleharvest.com/?p=85 14 Great Posts on jQuery Plugins | Style Harvest

    [...] 1. 15 jQuery Plugins To Create A User Friendly Tooltip [...]

  • http://davidrpoindexter.com/plugins/5-hot-jquery-plugin-roundups-guaranteed-to-keep-you-busy/ 5 Hot jQuery Plugin Roundups guaranteed to keep you busy

    [...] 15 jQuery Plugins To Create A User Friendly Tooltip Tooltips are not only a great accessibility feature, but a useful usability and user experience element, too. [...]

  • http://bloggeriz.0fees.net/?p=3 14 Great Posts on jQuery Plugins « Premium Desing

    [...] 1. 15 jQuery Plugins To Create A User Friendly Tooltip [...]

  • http://www.cssgalleries.com/2009/12/jquery-link-compilation/ Jquery Link Compilation | CssGalleries

    [...] 15 jQuery Plugins To Create A User Friendly Tooltip [...]

  • devid

    thans for this link

  • http://www.clickonpost.com/10-useful-sites-where-you-can-get-jquery-plugins-for-wordpress/ 10 useful sites where you can get Jquery plugins for wordpress » Click on post
  • http://intekhabrizvi.wordpress.com Intekhab A Rizvi

    Check out this very simple tooltip also, it can show you content from another file as well as us id tag to save link data, it also support images so that you can also show images on you tooltip, and it moves with mouse pointer.

    http://intekhabrizvi.wordpress.com/2010/01/21/jquery-very-simple-tooltip-plugin-ajax-enabled-2/

  • Stephan

    Another useful tool called Likno Web Tooltips Builder:

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

  • http://www.faydaliweb.com sadri

    Thanks great list!

  • http://chakwithu.wordpress.com/2010/03/14/15-jquery-plugins-to-create-a-user-friendly-tooltip/ 15 jQuery Plugins To Create A User Friendly Tooltip « Chakwithu's Blog

    [...] To Create A User Friendly Tooltip March 14, 2010 chakwithu Leave a comment Go to comments 15 jQuery Plugins To Create A User Friendly Tooltip Categories: Uncategorized Tags: 15 jQuery Plugins To Create A User Friendly Tooltip [...]

  • http://www.financial-compare.com James

    Great selection of tooltips, have been looking some tooltip scripts likes these for a while now. Thanks for sharing

  • http://www.bestfrenchcampsites.com J Wilson

    I’m afraid these are just too complicated for a designer of simple websites. I wouldnt say I am a complete newbie to computing having worked with interactive computer based learning for 6 years, Visual Basic for 4 years, designed some websites as well as doing a basic website course but this is all too complicated. It has all been written for an audience of javascript developers but not for an audience of reasonably proficient general computer users. I have looked at most of these examples in the hope of managing to find a simple one which works. You need to illustrate with the most simple example and work up from there, tell us EXACTLY what to download and where to put each bit of code. Give us an example of a blank webpage apart from what is needed. And maybe then I’ll manage this ! In the meantime I’ll stick with the title attribute !

  • http://www.chillwebdesigns.co.uk/chilltip.html Chill Web Designs

    Hey everyone,

    Check out my new JQuery Plug-In Tooltip code name ChillTip.

    http://www.chillwebdesigns.co.uk/chilltip.html

    B.R

    Chris

  • http://lasys venkatesh

    when i mouse over on text i want to display the data in ballon tooltip from database please give answer to me

  • http://www.totaltheme.com Sharon – Drupal Themer

    Thanks for posting this, just implement one of the Tooltip to this drupal theme color switcher http://www.totaltheme.com/free-drupal-themes

  • http://www.alibeigi.com/ طراحی سایت

    Nice collection
    .thanks

  • http://www.buildvoy.com building services

    Great collection. Thanks ;)

  • http://www.richardarran.com Richard Arran Landscape Photography

    Fantastic list, will be implementing on my new site, thank you.

  • http://spyer.ru/ spyer

    Thanks a lot.
    Choosed Simpletip and enjoyed :)

  • Logan

    qTip is by far the most versatile on this list. Use it! You won’t be disappointed. Plus, Craig has put together a real support structure around it.

    Amazing.

  • http://www.besttipstechnology.com technology

    Thanks for posting this. Jquery is a great add-on, and tooltips can improve users’ experiences.

  • http://www.jbruni.com.br J Bruni

    Very useful list. Thanks!

  • jonh

    Check also this one : http://labs.dmlogica.com.
    Nice collection, thanks

  • nakky

    Try out the newest version 2.0 of the
    jQuery Bubble Popup plugin at

    http://plugins.jquery.com/project/jqBubblePopup

    ;)

  • http://minnesotaincorporationlawyer.com/ Attorney Ayanna Wedderspoon

    This article is very thought-provoking. You are a very knowledgeable writer.

  • http://www.shprint.ir لیتوگرافی

    thanks for tooltip very pro

  • http://wpprohost.com/2010/10/21/jquery-plugins-for-wordpress/ Jquery plugins for wordpress « WordPress Pro Host
  • http://danielk.org/blog/2010/07/03/jquery/ d a n i e l k . o r g » Blog Archive » jQuery

    [...] ToolTips [...]

  • http://www.lakeside.com.np/ Lakeside Technologies

    A very nice find for myself… cool one

  • http://www.m0ri.com/ sargarmi

    Thanks for posting this. Jquery is a great add-on, and tooltips can improve users’ experiences.

  • http://www.full-dl.com dontbehzad

    Nice thank you for shared…

  • http://namakuadit.net/2010/12/referensi-web-untuk-belajar-jquery-dan-plugin-plugin-keren-lainnya/ Referensi web untuk belajar jQuery dan plugin-plugin keren lainnya | F. Aditya Primandani

    [...] Ajax Code, webdesignbooth.com , qTip. Plugin untuk membuat macam-macam tooltips dan [...]

  • frank

    I am not sure what mistake you’re pointing out. Would you please explain? Thanks.

  • http://www.riisdesign.no/ Chris

    Nice! I found out that my school’s website is using jQuery tools/tooltip.

  • http://mediachandler.com/ Media Chandler Web Design

    Hello thanks for sharing these… I am looking for a a plugin that will allow cool text box on hover over images… one of these may do what i want ..

  • http://www.valuecelebrity.com Nawaz

    Great informative post. Rating 10/10

  • Michael

    I found a great page that give numerous downloadable examples of how to change the text inside an anchor using jQuery. They are really helpful for web 2.0 and web 3.0 sites.

    http://www.ajaxera.com/jquery-change-text-in-anchor/

  • http://thinkdevcode.wordpress.com/2011/02/23/jquery-tooltip-plugin/ jQuery ToolTip Plugin « $(Ninjas are awesome)

    [...] came across nothing! Some of the cool ones I found were for old versions of jQuery (like 1.3.2) and all of them didn’t use jQuery UI themes so I decided to make my [...]

  • http://www.jaredmoore.com jared moore

    This is a great list, thanks for sharing it saved me a lot of time!

  • http://thomastka.wordpress.com/2011/02/28/jquery/ JQuery « thomastka
  • http://www.spiralteck.com yinka

    So many options to choose from, i really like beautytip.

  • Britt

    We’ve used qtip and beautytips but both have bugs and aren’t developed actively enough for our needs, it made us look for a better alternative.

    We settled on Tipped, it does everything the mentioned libraries do and more. I recommend it if you need something stable for production:

    http://projects.nickstakenburg.com/tipped

  • Zarro

    Beautiful plugins I am missing on of the best them Poshy Tip check it up here
    http://vadikom.com/demos/poshytip/

    Cheerz Zarro

  • http://www.vsesaiti.com belic

    I need simple tooltip with photo….

  • 123

    46569879

  • http://blog.overnetcity.com/16-04-2010/jquery-tooltip/ jQuery Tooltip | Olivier Balais

    [...] je suis un grand fan de la bibliothèque jQuery, je vous propose de vous rendre sur cette page : http://www.webdesignbooth.com/15-jquery-plugins-to-create-an-user-friendly-tooltip/ qui donne un bon aperçu des Tooltip développés avec ce [...]

  • http://www.facebook.com/profile.php?id=100000974831382 Erkan Demirci

     ++++

  • http://www.facebook.com/Mohamed.Ayoub.101 Mohamed G Ayoub

    Thank You Very much from Egypt

  • Hkgjg

    hi hu ha

  • http://www.roundvision.nl Tim

    Thanks for this link. I went with number two, jQuery Tools/Tooltips. Easy to install and small js file. I like the tooltip at bottom function based on the viewport.

  • http://www.yovae.com/blog/?p=1278 15个友好的jQuery提示框插件 | Yovae Blog

    [...] 译自:http://www.webdesignbooth.com/15-jquery-plugins-to-create-an-user-friendly-tooltip/ [...]

  • http://www.aktivtek.no seo

    Just stunning tips. I could use many of them in my projects. Thanks a lot

  • http://www.adriancrellin.co.uk Adrian

    Just added qTip to a website I’m currently working on. 

    Was very straight forward and easy to change style settings etc. The only thing I’m not too keen on is the size of the .js file, 38kb seems fairly high, especially if you only want fairly simple settings. Good plugin though!

  • Sdn1

    jqToolTip (last) is out of business :)

  • http://www.benih-lele.com Benih Lele

    i prefer using qTip2.
    it was perfect and multifunction

  • http://profiles.google.com/webiss Webiss Solution

    I think this stuff
    http://graphicriver.net/item/bubbles-invasion-120-vector-shaped-bubbles/411340
    would be usefull with your great collection =)

  • http://www.eofb.net David Kovins

    http://www.eofb.net
    Eofb.net is a web page to help the world community together to get rich. Eofb is a rich and unique products, today’s most advanced, easy for people to use to make huge cash in a short time. Eofb are offered for all countries in the world.

  • http://www.itwebxpert.co.uk cheap web design

    It is a great website. I find it very informative. Many thanks

  • Anonymous

    Hi. Here is one more jQuery css-only tooltip implementation that you may find useful http://bobef.net/bits/jquery.xtip/

  • Anonymous

    the article is impressive,thank  you  for  your share, i like it so much   hope  you like http://www.northfacekhumbu.com/  too

  • Anonymous

    the article is impressive,thank  you  for  your share, i like it so much   hope  you  like north face khumbu  too

blog comments powered by Disqus