Posted by : Magnus Thursday, 19 July 2012

jQuery tooltip is certainly one of the building blocks you should consider using in your web design and development. jQuery tooltips are easy to install and set up and they help you offer extra information on important elements and at the same time make the browsing experience of every visitor interesting and dynamic. Simple and minimalistic design is good for user experience and usability and jQuery tooltips help you achieve this by allowing you to “not show it all” at once. There is a lot of jQuery tooltip scripts available and some are free and some premium. Check out the demos and documentation to make sure you find what suits your needs best.
In this article we are sharing with you jQuery tooltips that you can use in your website to make it look cool and interesting. These are all easy to download scripts and easy to use, if you have the required tweaking know-how.

1. qTip

qTip is an advanced plugin for the ever popular jQuery JavaScript framework. Built from the ground up to be user friendly, yet feature rich, qTip provides you with tonnes of features like rounded corners and speech bubble tips, and best of all… it’s completely free under the MIT license!

2. The Tooltip

The Tooltip
The Tooltip is a handsome, modern gentleman that appears when it’s showtime.
by codecanyon (premuim plugin)

3. Fresh Tooltips

Fresh Tooltips
Precisely designed and coded Fresh plugins. It is Great for any kind of website and very practical. The top one is 100% transparent black, which looks very very cool.
by codecanyon (premuim plugin)

4. jQuery Tooltip

jQuery Tooltip
This is a really cool and good looking jQuery tooltip plugin. It is part of a set of pretty popular UI jQuery plugins.

5. HoverAlls v1.3

HoverAlls is a cool jQuery animation plugin that allows you to create animation effects quickly including really nice tooltips. With over 40 settings, HoverAlls can create unique animations for nearly any type of effect desired.
by codecanyon (premuim plugin)

6. jQuery and CSS3 Simple Tooltip

jQuery and CSS3 Simple Tooltip
jQuery and CSS3 Simple Tooltip works by popping up a bubble with more information about a word when you hover over it. You can even add an image to highlight the popped up info.

7. StickyTooltip

StickyTooltip is a really simple tooltip solution that provides fancy animations while remaining lightweight (only 3ko for minified version). The tooltips appear following a customizable sine curve and disappear the same way. – by codecanyon (premuim plugin)

8. jQuery Horizontal Tooltips Menu Tutorials

Beautifully made tooltip! This tooltip never disappears but follows when you hover over other links. Such a simple looking tooltip but its animation is brilliant.

9.Side Navigation Tooltip / Popup Bubble

 Side Navigation Tooltip / Popup Bubble
This script works by popping up bubbles or tooltips from sidebar navigation buttons. – by codecanyon (premuim plugin)

10. jQuery Tooltip Plugin

jQuery Tooltip Plugin
jQuery Tooltip Plugin is a free simple animated hover tooltip that can be easily integrated in your web pages.

11. Simple Tooltip

Simple Tooltip
This is a jQuery plug-in that creates a popped up on chosen elements. You have several options to use to create your own styling and formatting.
by codecanyon (premuim plugin)

12. Cramie jQuery Tooltips Plugin

 Cramie jQuery Tooltips Plugin
jQuery Tooltips plugin is a jQuery plugins to display popped up text. There are 6 colors available: yellow, black, white, red, blue, green. But, it’s easily customizable and you can add more colors to suit your website’s design. You can choose to display the bubble in 3 locations, on the top of the page, the bottom of the page, or floating over the element.
by codecanyon (premuim plugin)

13. jQuery Ajax Tooltip

 jQuery Ajax Tooltip
jQuery Ajax Tooltip works by popping up a “tooltip” with more information about a person whenever you see a person’s name.  When you hover over a name, more information appears.

14. aTip: the 1KB tooltip

aTip: the 1KB tooltip
Javascript tooltips are a valuable method to display additional information to users in a context-sensitive manner, however, at what cost? Bulky, unmanageable code slows down load times, increases web requests, and degrades browser/user performance. Enter aTip: the customizable, extremely lightweight jQuery plugin. Weighing in at 1.5KB with colour and style customization you can style any html element, all in different forms and methods. Additionally, the code is well commented, documented and easy to use/modify. If you want quick, neat and clean pure JS tooltips that support all modern browsers (and most old ones) then aTip is the solution. This package also includes email based support from Appsource, which includes help with installation should you require it.
by codecanyon (premuim plugin)

15. Generic Popups (jQuery)

 Generic Popups (jQuery)
“Generic Popups” script lets you create different kinds of Popups; such as Tooltips, Message Boxes, Alerts, Prompts tc. with support for complex structures. The functionality of the plug-in is similar to that of jQuery, therefore, the learning curve is relatively easier.
by codecanyon (premuim plugin)

16. Shiny Tooltips

 Shiny Tooltips
You can add tooltips to elements which appear when you mouseover them.
by codecanyon (premuim plugin)

17. everyTip Jquery tooltip Plugin

everyTip Jquery tooltip Plugin
EveryTip is a Jquery plugin that will read out any element’s title tag and converts it into a individual styleable dynamic bubble. You can apply it on any element you want e.g.: img, a , li, span, div and so on. The plugin automatically detects all elements of your specified type on the whole page and add’s a tooltip to it. It also supports inside HTML , so you can display all HTML tags inside a tooltip. Comes in a lightweight and crypted version.
by codecanyon (premuim plugin)

18. Useful and Practical jQuery Image ToolTips

 Useful and Practical jQuery Image ToolTips
This script displays a tool tip image when the user hover on the thumbnail with fade-in and out effect.

19. Cut & Paste Ajax Tooltip script v1.2

Cut & Paste Ajax Tooltip script v1.2
This Ajax script enhances the default “title” attribute of HTML so certain tooltips can instead get their contents from an external file, with rich HTML content and all. Integration is easy and non obtrusive, and for the sake of efficiency, the script will only use Ajax to load the tooltip’s content the very first time the user rolls over the attached element.

20. jQuery plugin EZPZ Tooltip

 jQuery plugin EZPZ Tooltip
The tooltip appears as you hover over the target, and follows the mouse cursor until it leaves the target.

21. tipsy – Facebook-style tooltip plugin for jQuery

 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.

22. clueTip: A jQuery Tooltip Plugin

clueTip: A jQuery Tooltip Plugin
The clueTip plugin allows you to easily show a fancy bubble when the user’s mouse hovers over (or, optionally, clicks on) any element you designate in your script. If the element includes a titleattribute, its text becomes the heading of the clueTip.

23. Bottom slide tooltip

 Bottom slide tooltip
This bottom slide-in box can be used as an “aid” or “tooltip” for your page elements. Move your mouse over the element in question (must support the onMouseover event, such as <A> tag), and a description will slide in from the bottom of the browser.

24. SuperNote

This is an XHTML/CSS/JavaScript powered popup info system with a strong focus on accessibility. Popup notes are stored as “footnotes” in a document and dynamically converted to tooltips!

25. Better Tooltip

 Better Tooltip
This script works by displaying the tooltip when the target is clicked.

26. Digg-style post sharing tool with jQuery

Cool digg-style post sharing tool. This tooltip could be very useful for social networking website.

27. BeautyTips

BeautyTips is a simple-to-use balloon-help style 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. These balloons are drawn dynamically using the canvas HTML 5 element, and options include corner radius, spike length and width, stroke width. The balloons can auto-position based on the most available area in the current display window or they can be positioned according to an array of preferences (just left or right for instance).

26. Sticky Tooltip script

Sticky Tooltip script
This script adds a rich HTML to elements that’s revealed when the mouse rolls over them, in which the tooltip follows the cursor around as it moves about within the element. The bubble can be “stickied”, or kept visible on the screen by right clicking on pressing “s” should the user wish to interact with some content within the tooltip, such as click a link inside it. The contents for each tooltip are simply defined as regular HTML on the page, making them very easy to define and customize. Throw in a subtle fade in effect, and you’ve got yourself a tooltip that can do more than just show extra information, but serve it as well!

27. Awesomeness

Cool tooltip with nice transition effect and cool transparent border around it.

28. (mb)Tooltip

Beautifully made tooltip with nice transition for input fields.

29. Easiest jQuery Tooltip and URL Screenshot Preview

 Easiest jQuery Tooltip and URL Screenshot Preview
These scripts  add 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 the object, the element moves with it and when cursor roll out, the element is deleted.

30. Simpletip

Beautifully made tooltip with fade transitions. When you hover over a link, a tooltip fades in just above or below the link.

31. Side Navigation Tooltip / Popup Bubble

 Side Navigation Tooltip / Popup Bubble
This script works by popping up bubbles or tooltips from sidebar navigation buttons.

32. Simple Tooltip Plugin


This plugin creates a simple tooltip with content of your choice within it. It appears as you hover over you specified DOM elements. Simply pass in your element and everything else is taken care of. - by codecanyon (premuim plugin)

Any comments for the jQuery Tooltip Plugins

If you have any comment please don’t hesitate to write them down here. We hope that this post can help you improve your web designs. We encourage you to share this to your friends if you find it helpful. Enjoy reading!

{ 1 comments... read them below or add one }

- Copyright © Bjonk Design -