Tooltips are everywhere,
roll over this text
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.
 |
| jQuery Plugins for Creating Customized Tooltips |
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.
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.
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.
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.
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.
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.
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.
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.
