Jquery Tooltip Plugins and Tutorial Collection

January 20th, 2011 by aditia rahman / 4 Comments  


There are so many solution that offer out there for creating tool tip based on jQuery, even in the jQuery UI milestone the tool tip has been included in the project here is the jquery ui tooltip milestone, but if you need now sure you have to use the 3rd plugins or create by yourself, in this post I try to collect all that I can found including the link to the step by step tutorial.

Ready To Use Plugins

This section is for you who want to make it done in easier and faster way, most of this plugins not explain how it inside the plugins, of course you don’t want to know right? this is why you using the plugin, just to know how to use and modify it.

1. jQuery Tools Tooltip

jQuery TOOL Tooltip

Demo | Download

2. qTip jQuery Plugin

qTip is an advanced tooltip 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 it’s completely free under the MIT license.

qTip jQuery Plugin

Demo | Download

3. jTip – a jQuery Tool Tip

jTip a jQuery Tool Tip

Demo | Download

4. jQuery Plugin Tooltip

Bassistance jQuery Tooltip Plugin

Demo | Download

5. TipTip jQuery Plugin

TipTip is a custom tooltip that behaved just like the browser tooltip, and that is exactly what TipTip does. TipTip detects the edges of the browser window and will make sure the tooltip stays within the current window size.

TipTip jQuery Plugin

Demo | Download

6. aToolTip


Demo | Download

7. mb Tooltip

MB Tooltip

Demo | Download

8. vTip


Demo | Download

9. Tipsy

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


Demo | Download

10. Simpletip

Simpletip is a plugin for the popular jQuery JavaScript library. It 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.


Demo | Download

Other Available Plugins

jGrowl, htmltooltip, bQuery, Beauty Tips, BetterTip, jqTooltip, EZPZ Tooltip, clueTip, pop!, Hovertips, Simple Tooltip, Simple jQuery Tooltip, Just The Tip, Thumbnail Popup Plugin, jQuery Tiper, Easiest Tooltip, jQuery Tooltip


This section for who want know the detail how the tooltip work, these tutorial provide some great step by step instruction

1. Simple Tooltip by Soh Tanaka

Simple Tooltip w/ jQuery & CSS by Soh Tanaka


2. Colortip by Tutorialzine

Colortips jQuery Tooltip Plugin

Demo | Download

3. Better Tooltip by Jon Cazier (Nettuts)

Build a Better Tooltip With jQuery Awesomeness

Demo | Download

4. jQuery Horizontal Tooltips Menu by Queness

jQuery Horizontal Tooltip Menu

Demo | Download

5. Digg Style Post Sharing Tool by Queness

Digg Style Post Sharing

Demo | Download

6. Coda Popup Bubbles by jQuery For Designer

Coda Popup Bubbles

Demo | Download

7. Create a Simple CSS + Javascript Tooltip with jQuery by Queness

Create a Simple CSS + Javascript Tooltip with jQuery

Demo | Download

8. jQuery Tooltips by David Walsh

David Walsh jQuery Tooltips


9. Poshy Tip by Vadikom

Poshy Tip


10. Style My Tooltips jQuery Plugin by Mahilu

Style My Tooltips jQuery Plugin


Demo | Download

Other Available Tutorials

Smart Tooltips, Smart Tooltips Part 2, jQuery Ajax Tooltip, Creating A Simple Tooltip Using jQuery and CSS, jQuery Tooltips, Simple Tooltip jQuery Plugin, jQuery Custom Tooltip, Experimental jQuery Tooltip, Rollovers Tooltips jQuery, Adding jQuery Tooltips, How to Create Simple jQuery Tooltip

        submit to reddit Delicious

4 Comments Leave a Comment Subscribe RSS

Leave a Comment