Skip to main content

10 jQuery Tooltip Plugins and Tutorials

By Sam Deering



😳 Ever felt a little embarassed sharing your JavaScript? Let's fix it.

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 has 15+ years of programming and website development experience. He was a website consultant at Console, ABC News, Flight Centre, Sapient Nitro, and the QLD Government and runs a tech blog with over 1 million views per month. Currently, Sam is the Founder of Crypto News, Australia.

New books out now!

💁‍♀️ Fun Fact: Python was ranked #2 on a recent highest paid coders list. *

🤓 Ok. When did a code editor from Microsoft become kinda cool!?