Tooltips on website are small things which can play a big role in website design. If a tooltip on your website is very well made and looks amazing then it can lift up visitor’s impression about your website. And that’s why here comes jQuery to help with its well-made tooltips. Below you can find our 10 jQuery Tootltip plugins tutorials. Have fun!

1. Rollovers and tooltips with jQuery

Shows a nice tooltip when the mouse is hovered over navigation icons. Take advantage of html tags attributes manipulation through jQuery.

2. TinyTips

It is a very lightweight jQuery plugin that gives the ability to add tooltips to pretty much any element on a page. Thoroughly documented and designer friendly.

3. Tipped – The JavaScript Tooltip Framework

Tipped allows you to easily create beautiful tooltips using your JavaScript framework of choice. Evolved from the popular Prototip library, Tipped takes tooltips to the next level by using HTML5 to give you full control over the look and feel of your tooltips.

4. Poshy Tip

It is a tooltip plugin that allows easily creating stylish tooltips and also includes the most useful features for such a script.

5. Cute Balloon

It is a jQuery script that allows you to easy make a beauty tool tip balloon, also with AJAX content.

6. Humanized Messages

It is a JavaScript-based system for non-model notifications, from an idea by Jef Raskin, as relayed by Aza Raskin and adapted for jQuery and initially for use with K2 by Michael Heilemann.

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

8. Coda Popup Bubble

Very nice tooltip with cool transition effect and it also has a drop shadow.

9. Awesomeness

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

10. TipTip

Beautifully made tooltip with fade in / out transition effects, transparency and drop shadow effect.

Sam Deering is a Front-end Web Developer who specialises in JavaScript & jQuery. Sam is driven and passionate about sharing his knowledge to educate others.

Free Guide:

How to Choose the Right Charting Library for Your Application

How do you make sure that the charting library you choose has everything you need? Sign up to receive this detailed guide from FusionCharts, which explores all the factors you need to consider before making the decision.

Ending Soon
Free SitePoint Premium

Get one free year of unlimited book and course downloads on SitePoint Premium!