7 jQuery Plugins for Creating Customized Tooltips

Tooltips are everywhere, [tooltip text=”roll over this text” gravity=”nw”]like I said, everywhere[/tooltip] and I’ll prove it to you. I do believe that for the most part, tooltips are a part of the web structure and make it that much more easy to navigate and understand.

On bigger projects, tooltips can sometimes be the core of a navigation system, and so they’re not just something that you can choose to have, or not to have. You’re given the choice of making tooltips the main part of your design.

The sad part, tooltips aren’t really popular on mobile devices, for the simple reason that there is no cursor, and so it makes it really hard to just roll over some text and see what it says. There is a lot of talk about hover effects on mobile devices, but it’s not my main topic of discussion, and I’ll leave it for later.

I’m going to go over my absolute favorites in this post, and I’ve no reason to believe that I might have skipped yours, don’t worry and submit a comment to let the rest of the community know!

I’ll be publishing in the standard format of snapshot of the plugin, and some background info – all of these plugins provide demos on their official pages, I so no reason to reinvent the wheel.

1. tipsy

tipsy
tipsy is a simple jQuery plugin for generating Facebook-style tooltips. It’s so good that major websites like Twitter are using it to power their tooltip system. I really like the simplicity of tipsy, and my own WordPress theme that I use provides a very similar style to tipsy.

Among the notable features you’ll find the ability to integrate it easily with forms, which can help to make signup process twice as easy.

2. qTip2

qTip2   Pretty powerful tooltips   Demos
qTip2 allows you to use not only regular textual content, but also complex HTML from other elements on the site. It can even pull content in from other pages via jQuery’s .ajax() functionality, and supports in-built titles and close button.

This is definitely one of the nicest tooltip plugins I’ve worked with, being able to iframe stuff from other sites within a tooltip is pretty crazy, and probably does come in handy. Though, I’m only able to think in terms of advertising.

3. tooltip

A minimal jQuery tooltip plugin
I don’t think there is much to say about this plugin, other than it’s really ligheweight and packs a elegant look. Give it a go, it seems that JavaScript isn’t involved in the process.

4. tooltipsy

tooltipsy   jQuery tooltip plugin for control obsessed designers.
Besides the insane bleeding edge design, it’s actually a very cool plugin for creating interactive and CSS native tooltips. You’re also able to use AJAX to make some cool stuff come together, I enjoyed the ‘flying’ tooltip example a lot.

5. tooltipster

Tooltipster   The jQuery Tooltip Plugin
I’m in love with the design and functionality of this plugin. I think the feature that stood out the most for me was the ability to add tooltips to icons / images, which can greatly enhance the engagement rate for the right website.

You can build interactive tooltips, as well as choose from several pre-made styles, in case you don’t feel like making one of your own.

6. PowerTip

jQuery PowerTip
PowerTip is a jQuery tooltip plugin with some advanced features like hover intent testing, tooltip queueing, and support for complex data. It also has that rarest of features in jQuery plugins, it’s not abandonware.

It might seem like there is a lot of stuff to learn at first, but it all comes together by the end of it. The reason the documentation is so complex is because you’re able to do a lot of interesting things with PowerTip, not to mention that it packs some serious features.

7. grumble.js

Examples and documentation on grumble.js
I had to include something fun and interactive, and I think that grumble is the perfect tooltip plugin for that. You can easily add a bubble to any element; configure its rotation on a 360 degree axis and define its distance from the centre of the element.

It also enables you to wrap those bubbles around a specified element, and then have that bubble rotate up and down, creating a really cool animation effect. Give it a spin on the demo page, I think you’ll love it.

Tooltips Plugins Built for jQuery

I’ve tried to keep it short and sweet, I hope these were of help and while it doesn’t look like a lot of variety, do believe me that each of these plugins can be configured to do something unique.

I’m more of a person who likes good design – flat – but I’ve tried to keep bias out of it. Liked this post? Why not share it with your friends as a gesture of good will? :)