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.

Build a Better Tooltip with jQuery Awesomeness – Demo

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 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

Create a jQuery Popup Bubble – Demo

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.

jQuery Tooltip – Tooltips done right – Demo

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 Horizontal Tooltips Menu Tutorial – Demo

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!

qTip jQuery Plugin – Demo

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.

Coda Popup Bubbles jquery Tooltip – Demo

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.

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.

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.

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.

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.

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.

jTip – The Jquery Tool Tip – Demo

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.

Easy Tooltip – jQuery Plugin – Demo

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 – Demo

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!

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.

jHelperTip 1.0 – The Multi-Use Tooltip for jQuery – Demo

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.

Simpletip – A simple jQuery Tooltip Plugin – Demo

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.

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.

Tipsy – Facebook-Style Tooltip Plugin for jQuery – Demo

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.

clueTip – A Simple jQuery Tooltip Plugin