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.
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.
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
4.) jQuery Tooltip – Tooltips done right
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:
6.) qTip jQuery Plugin
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.
8.) Prototip 2 – Create Beautiful Tooltips with Ease
- 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.
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.
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.
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.
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.
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.
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).
16.) Pop! Simple Pop Menus with jQuery
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.
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.
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.
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.
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.