6 Free jQuery Tooltip Plugins
By: Keith
There’s no question in learn a web design that including tooltips in your web
design helps in making your website more user-friendly. They’ve been proven to
be very helpful to the user especially when it comes to filling out online
forms, particularly in keying in acceptable data formats in text fields and
choosing the correct option button or check box.
Thanks to jQuery, not only have web developers managed to
make these bland yet helpful popup boxes or squares a little more appealing to
the eye but also more functional.
Below are six nice and cleverly designed jQuery tooltips
that you can use on your website, and the best thing about them is they’re all
FREE! Some of them activate with the usual mouse hover while some with mouse
clicks; simply pick whatever suits your fancy.
Our first jQuery plugin’s name says it all. This script is so
short and simple, it hurts! Best of all, it can be applied for a variety
of purposes. Below are 3 examples of using the same very, very simple script. Demo1, Demo2, Demo3
Coda is one of the new web development tools for the Mac ,
and it’s very popular with some web designers and developers. Panic (the
developers of Coda) has a rep ‘sharp’ design.
jQuery Image Tooltips
It displays a tooltip image when the user hovers on the
thumbnail with fade in and out effect.
jGrowl
jGrowl is a jQuery plugin that raises unobtrusive messages
within the browser, similar to the way that OS X's Growl Framework works. Click
on the name above or the image below to see and appreciate the code in action.
This tooltip follows the cursor around as it moves about
within the element. What’s unique about this tooltip is that it can be
"stickied", or kept visible on the screen through the right-clicking of
the mouse over the element or simply by pressing the "s" key.
This is very useful when the user wishes to interact with
some content within the tooltip, like clicking on a link inside it. The contents
for each tooltip are very easy to define and customize as they are simply
defined as regular HTML on the page.
Now here’s a very cool and interesting tooltip plugin whose
design is said to be similar to that of the one found in Digg.com. It’s a
tooltip box that contains share links to various social media sites!
Although similar in appearance, the way it works is different
with Digg's. If you view Digg’s HTML source code, it has the sharebox HTML code
in every single post. But in this tutorial we have only one sharebox, and all
the links share the same template.
Hope you guys find these plugins very useful on your sites.
Have fun experimenting with them!
No comments:
Post a Comment