21 Best jQuery Tooltip Plugins, Demos, Examples & Tutorials

Today we are posting some attractive, Handy and useful jquery Tooltip plugins for your new projects. If the tooltip is being used appropriately, it can improve our site’s user friendly level, and also save us a lot of spaces.

What is Tooltip ? – It is a Easiest way to show extra/more 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.

In this post we have collected 21 best jQuery Tooltip Plugins with Demo , Examples and Tutorials to help with your next project to create User friendly Web Design, hope you will enjoy them!

1.) Build a Better Tooltip with jQuery Awesomeness

This awesome jQuery Tooltip provides supplementary information about that element. For example, a link with little or no text (an icon) may become confusing. Provide an extra sentence or two within a tooltip to explain to your users what will happen if they click on it.

This is a very basic example of what a tooltip plugin can do. The fun part now will be to make it more robust. There are all sorts of ways to expand this plugin. A needed enhancement would be detecting the location of the tooltip in relation to the boundaries of the browser window and displaying the tooltip accordingly so it doesn’t get cut off.

jQuery Tooltip Plugins

Build a Better Tooltip with jQuery AwesomenessDemo

2.) Jquery Ajay Tooltip

The information is requested via AJAX, so you don’t have to include all of this extra information in a hidden div. This keeps your markup smaller for grids with tons of names in it.When you mouse over another name, the previous one will disappear. If you tried this with the original Coda example, you’d end up with a weird streaking animation since there’s a delay before the div is hidden.

jQuery Tooltip Plugins

jQuery Ajax Tooltip

3.) Create a jQuery Popup Bubble

When you repeatedly move your mouse over the RSS icon, the popup will continue to popup even when you stop moving your mouse over it

21 Best jQuery Tooltip Plugins, Demos, Examples & Tutorials

Create a jQuery Popup BubbleDemo

4.) jQuery Tooltip – Tooltips done right

Tooltips are one of the most important JavaScript widgets on the web. Although important, they also happen to be a very badly misunderstood and poorly implemented component. This tool corrects the situation. You’ll get a professional piece of software that is easy to understand and use.

21 Best jQuery Tooltip Plugins, Demos, Examples & Tutorials

jQuery Tooltip – Tooltips done rightDemo

5.) jQuery Horizontal Tooltips Menu Tutorial

A horizontal menu with tooltip that slides accross the menu panel. It’s a bit similar to lava lamp, but in this script, it displays the caption of the icon menu.You will need jQuery easing plugin for the animated transition. This is how it looks like:

jQuery Tooltip Plugins

jQuery Horizontal Tooltips Menu TutorialDemo

6.) qTip jQuery Plugin

qTip is an advanced tooltip plugin for the ever popular jQuery JavaScript framework. qTip provides you with tonnes of features like rounded corners and tips, and best of all… it’s completely free!

21 Best jQuery Tooltip Plugins, Demos, Examples & Tutorials

qTip jQuery PluginDemo

7.) Coda Popup Bubbles jquery Tooltip

Coda is one of the new web development tools for the Mac – and it’s popular amongst designers and developers I know. Panic (the developers of Coda) are also known for their sharp design.

21 Best jQuery Tooltip Plugins, Demos, Examples & Tutorials

Coda Popup Bubbles jquery TooltipDemo

8.) Prototip 2 – Create Beautiful Tooltips with Ease

Prototip allows you to easily create both simple and complex tooltips using the Prototype javascript framework.

  • Style: Easy to customize.
  • Position: Complete control over tooltip positions.
  • Round: Configurable rounded corners, no PNG images required.
  • Speech bubble effect!
  • Works on all modern browsers.

21 Best jQuery Tooltip Plugins, Demos, Examples & Tutorials

Prototip 2 – Create Beautiful Tooltips with Ease - Demo

9.) Easiest Tooltip and Image Preview Using jQuery

this script does is adds an element to the body when you roll over a certain object. That element’s appearance is predefined with css (positioned absolute and styled) so all we need to do is fill the element with content, calculate mouse position and make it move accordingly. When cursor is moved over he object, element moves with it and when cursor roll out, the element is deleted.

21 Best jQuery Tooltip Plugins, Demos, Examples & Tutorials

Easiest Tooltip and Image Preview Using jQuery - Demo

10.) TipTip- Sweet & Simple Custom tooltip jQuery Plugin

TipTip detects the edges of the browser window and will make sure the tooltip stays within the current window size. As a result the tooltip will adjust itself to be displayed above, below, to the left or to the right of the element with TipTip applied to it, depending on what is necessary to stay within the browser window.

t21 Best jQuery Tooltip Plugins, Demos, Examples & Tutorials

TipTip- Sweet & Simple Custom tooltip jQuery Plugin

11.) vTip jQuery Tooltip Plugin

vTip is designed to quickly provide very lightweight  tooltips to users of jQuery.Using the jQuery framework any element with a class of vtip will have it’s title attribute turned into a sleek, customizable tooltip without the klunk and loading time of a large tooltip script.

21 Best jQuery Tooltip Plugins, Demos, Examples & Tutorials

vTip jQuery Tooltip Plugin - Demo

12.) Create a Simple CSS + Javascript Tooltip with jQuery

Simple and easy way to create a javascript tooltip with jQuery. Author  break it into several sections: getting the mouse xy axis, anchor tag structure, how to hide default TITLE tooltips, css plus rounded corners box and the final working demo. Enjoy.

jquery tooltip plugin

Create a Simple CSS + Javascript Tooltip with jQuery -Demo

13.) jTip – The Jquery Tool Tip

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. Also jTip can be customized by providing user defined widths (defaults to 250px wide) via a url query string. The height is liquid and stretches to match the content that fills the tool tip. Additionally it’s possible to provide a link (via url query string) to a jTip tool tip link element (a href) so that the link will still function as expected by the user. See the Yahoo link in the demo for a working example.

jquerytooltip12

jTip – The Jquery Tool TipDemo

14.) Easy Tooltip – jQuery Plugin

By default this plugin will read the title attribute of the element and convert it into fade-in tooltip that you can style any way you want. Important note, it doesn’t have to be an anchor tag.

jquerytooltip17

Easy Tooltip – jQuery PluginDemo

15.) 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).

jquery-input-floating-hint-box

jQuery Input Floating Hint BoxDemo

16.) Pop! Simple Pop Menus with jQuery

It is an unobtrusive javascript plugin for JQuery which allows you to enjoy simple dropdown menus with POP!

jquerytooltip15

Pop! Simple Pop Menus with jQuery -Demo

17.) jHelperTip 1.0 – The Multi-Use Tooltip for jQuery

jHelperTip is intended to be useful in many situations such as hovering tip and clickable tips. It can get data from a container, through Ajax or even the attributes of the current object.

jQuery Tooltip Tutorials

jHelperTip 1.0 – The Multi-Use Tooltip for jQueryDemo

18.) Simpletip – A simple jQuery Tooltip Plugin

Sets position of tooltip to absolute arguments posX and posY if supplied as integers, or relative to parent element if supplied as strings. A mixture of both strings and integers can also be used.

jQuery Tooltip Tutorials

Simpletip – A simple jQuery Tooltip PluginDemo

19.) Orbital jQuery Tooltip Plugin

With the Orbital Tooltip you can choose to position the tooltip on any object in a 360 degrees around it. With multiple options for spacing & offset as well as styling, Orbital Tooltip stands head and shoulders above other jQuery tooltips.

jQuery Tooltip Tutorials

Orbital jQuery Tooltip Plugin

20.) Tipsy – Facebook-Style Tooltip Plugin for jQuery

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

jQuery Tooltip Tutorials

Tipsy – Facebook-Style Tooltip Plugin for jQueryDemo

21.) ClueTip – A Simple jQuery Tooltip Plugin

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. If the element includes a title attribute, its text becomes the heading of the clueTip.
jQuery Tooltip Tutorials

clueTip – A Simple jQuery Tooltip Plugin

22 Comments
  1. Thanks for sharing!
    I always like reading about jQuery related stuff!

    Reply
  2. Thank you for the great info!

    Maybe another tool you could add to your list is Likno Web Tooltips Builder: http://www.likno.com/jquery-tooltips/index.php

    Cecile

    Reply
  3. Very nice jQuery tooltip round-up. Needs to be bookmarked.

    Reply
  4. Found this round-up a while back and when I needed a tooltip plugin I couldn’t finde it anymore. So this time, bookmarked

    Reply
  5. thanx for sharing..i was looking exactly something like that

    Reply
  6. Great collection. Thanks :)

    Reply
  7. Paul says:

    Very nice collection of jtip examples . thanks for sharing

    Reply
  8. mitran says:

    great collection man… thanks for the share….!!!!!!!

    Reply
  9. samer says:

    Hi
    GREAT Collection man
    this is what exactly wanted.

    Thank you very much

    Sameer

    Reply
  10. Oliver says:

    If you want just a very simply plugin to show a tooltip: go with Tipsy!! I just love it…

    Others messed up my divs…

    Reply
  11. nice tutorial, i will use it in my applications to imprive GUI
    thanks a lot

    Reply
  12. GaneshB says:

    nice collection… thanks for sharing..

    Reply
  13. ProtoTip is for Prototype… not jQuery.

    Reply
  14. Shantanu Singh says:

    Hi Guys, i have problem with tooltip, can some help me ,

    i want a tooltip on when i drag and select a paragraph text the tooltip comes in center of the selected text. please help me i am really fade up of this.

    help! help! help!

    Reply
  15. time says:

    Nice collection, actually 11th is probably the one that i need, but unfortunatly i need HTML support in it…

    Reply
  16. jaylord says:

    Tnk u 4 posting all of this, its a great help.

    Reply
  17. webiss says:

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

    Reply
Trackbacks / Pings
Leave a Reply




XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>