21 Best jQuery Tooltip Plugins

Tooltip, although are small things but one can’t underestimate their importance in website design. Tooltip is an excellent way to put up any extra information on site without hampering basic design or the main information. A “hover box” appears and disappears on hovering the cursor/mouse. jQuery Tooltip is the key to make a well made tooltip.

Today we are presenting Best jQuery Tooltip Plugins for making your site more user-friendly and attractive. So start hovering and give your site a breathing space and readers the information they want.

If you like this article, you might be interested in some of our older articles on jQuery Google Map Plugins, jQuery Dropdown Menus, jQuery Slideshow Plugins, and jQuery Sliding Tutorials.

jQuery Tools Tooltip

Very cool tooltip! It’s very well made because it consists of cool transition effects and it also has a transparency and a drop shadow effect.

jQuery Tools Tooltip

More on jQuery Tools Tooltip

Create a Digg-style post sharing tool with jQuery

I will show you how to create a social bookmarking tool that look like digg’s. It looks cool, practical and useful! I also include the komodomedia’s social bookmarking icons and a long list of submission URL for one click bookmark.

Create a Digg-style post sharing tool with jQuery

More on Create a Digg-style post sharing tool with jQuery

Prototip

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

Prototip

More on Prototip

Build a Better Tooltip with jQuery Awesomeness

Browsers will automatically display a tooltip when you give a title attribute. Internet Explorer will also use the alt attribute. But, in this tutorial I’m going to show you how to quickly write a jQuery plugin that will replace the typical browser tooltip with something a little flashier.

Build a Better Tooltip with jQuery Awesomeness

More on Build a Better Tooltip with jQuery Awesomeness

jQuery Horizontal Tooltips Menu Tutorials

A horizontal menu with tooltip that slides across the menu panel. It’s a bit like lava lamp, but in this script, it displays the caption of the icon menu.

jQuery Horizontal Tooltips Menu Tutorials

More on jQuery Horizontal Tooltips Menu Tutorials

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. You can apply this script to any element(s) you want.

Easy Tooltip - jQuery plugin

More on Easy Tooltip – jQuery plugin

bQuery :: Good Tip & Tabworld

The set up offers endless configurablity. User your own css and tags (as long as you don’t use the “q” tag anywhere) to style your tab panel. It’s easy to do, easy to set up, easy to style because Tab World does all the hard work.

bQuery :: Good Tip & Tabworld

More on bQuery :: Good Tip & Tabworld

TipTip jQuery Plugin

TipTip is a very lightweight and intelligent custom tooltip jQuery plugin. It uses ZERO images and is completely customizable via CSS. It’s also only 3.5kb minified!

TipTip jQuery Plugin

More on TipTip jQuery Plugin

Coda Popup Bubbles

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

Coda Popup Bubbles

More on Coda Popup Bubbles

Creating A Simple Tooltip Using jQuery and CSS

Adding a plugin for something that simply is overkill. Adding a plugin for tooltips typically requires that you include an extra script and an extra stylesheet (depending on which one you use). In this post, I ‘ll show you just how easy it is to create a clean, styled tooltip using jQuery.

Creating A Simple Tooltip Using jQuery and CSS

More on Creating A Simple Tooltip Using jQuery and CSS

Orbital Tooltip

The Orbital Tooltip came about because we wanted to see a more flexible tooltip that allowed for a larger range of flexibility with positioning of a tooltip. 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 Tooltip

More on Orbital Tooltip

Easiest Tooltip and Image Preview Using jQuery

What 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

More on Easiest Tooltip and Image Preview Using jQuery

jQuery (mb)Tooltip

Now you can replace the ugly default tooltip with this smart and nice one!

jQuery (mb)Tooltip

More on jQuery (mb)Tooltip

jQuery Ajax Tooltip

Our application is very person centric, so we wanted an easy way to pop up a “tooltip” with more information about a person when you see a person’s name. For example, here are some search results. When you hover over a name, more information appears.

jQuery Ajax Tooltip

More on jQuery Ajax Tooltip

BeautyTips

BeautyTips is a jQuery tooltips plugin which uses the canvas drawing element in the HTML5 spec to dynamically draw tooltips (sometimes called “talk bubbles” or “help balloons”) associated with an html element on the page. These tips are highly configurable and can be triggered in many ways.

BeautyTips

More on BeautyTips

jQuery Form Validation and Tooltip(S.Sams)

jQuery Form Validation and Tooltip.

jQuery Form Validation and Tooltip(S.Sams)

More on jQuery Form Validation and Tooltip(S.Sams)

Create a Simple CSS + Javascript Tooltip with jQuery

Simple and easy way to create a javascript tooltip with jQuery. I 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.

Create a Simple CSS + Javascript Tooltip with jQuery

More on Create a Simple CSS + Javascript Tooltip with jQuery

jGrowl

jGrowl is a jQuery plugin that raises unobtrusive messages within the browser, similar to the way that OS X’s Growl Framework works.

jGrowl

More on jGrowl

Pop!

Enjoy simple dropdown menus with pop!, an unobtrusive javascript plugin for jquery.

Pop!

More on Pop!

qTip

qTip is a tooltip plugin for the jQuery framework. It’s cross-browser, customizable and packed full of features!

qTip

More on qTip

Fancy Thumbnail Hover Effect w/ jQuery

It may not be as smooth as the flash version, but it’s definitely a neat effect. If you switch up the absolute potion coördinates, you can create various ways the hover effect pops out as well.

Fancy Thumbnail Hover Effect w/ jQuery

More on Fancy Thumbnail Hover Effect w/ jQuery

Sharing is Caring
  • http://www.insideweb.es Inside Web

    Una colección muy buena. Saludos

  • George

    Hi there!

    Really nice job!However, I’d like to show you one more program that I use for tooltips.It’s Web Tooltips Builder (by Likno company).I think it is a nice application and friendy to the user.

  • nanot

    BRAVO

  • Stephen S. Musoke

    You have missed the venerable cluetip – http://plugins.learningjquery.com/cluetip/

    It has a wide range of features and also has Jquery UI so you can easily theme it

  • technology review

    Thanks for the cool collection

  • Britt

    We’ve used qtip and beautytips but both have bugs and aren’t developed actively enough for our needs, it made us look for a better alternative.

    We settled on Tipped, I recommend it if you need something stable for production:

    http://projects.nickstakenburg.com/tipped

  • Jose Fernandez

    Prototip is not a jQuery plugin

  • http://www.addcolours.com Rali Madhu

    Hi Sunalini,
    Nice collection.

  • masterb

    great jquery tools, thanks

  • Koen De Jaeger

    Handy overview. Tnx.

  • Levitikon

    Prototip does not use jQuery, but instead the Prototype 1.7+ library :/

  • http://www.inwebson.com Kenny

    Nice list! Very useful as references. My favorite tooltip plugin – TipTip

  • Rob

    Nice list, here is my own jQuery tooltip plugin I created to add to the list: http://www.websanova.com/plugins/websanova/tooltip

  • http://www.yumanyi.es/ actividades para empresa

    an incredible collection of jquery, high quality in a single post, thanks

  • http://www.elangelblanco.es/ esclerosis

    Very thanks, for the colection, i liked Very much the plugin like a clouds, its cool.

    Thanks

  • http://linuxthebest.com Sinbad Konick

    Tooltips is really great for websites to customize your designed …

  • http://www.trickymak.com mak

    nice work……..

  • http://www.geekandblogger.com Pavan Somu

    jQuery Ajax Tooltip is better than others in my view.

  • http://www.amitpatil.me Amit
    • http://www.satyathakur.com Satya Thakur

      I’m sure this is so useful for most people and designers reading this blog.
      Thanks for sharing.

  • Jai

    Very useful collection here. Thanks for the share. I will definitely check this one by one. ^^

  • http://www.satyathakur.com Satya Thakur

    jQuery tools are very helpful to make the site clean and elegant. Also we can get some cool effects using the same.

  • http://gadgettrick.com/ raj

    Excellent plugin information but i want to know that any tooltip blogroll plugin available for wordpress?

  • Kamal

    Great job indeed. It will be very useful for me. This collection has very nice and creative tooltip plugins which can be used depending on the requirements.