I am available for freelance work - HIRE ME

Freebie: WhatsThis? jQuery Plugin

posted by Matt Ward on Dec 24, 2010.

Here’s a neat little bit of jQuery goodness that I’ve created recently, and which I have elected to make available as a code freebie here on the blog. Entitled WhatThis?, it allows you to create simple information buttons to accompany selected elements in your site or application. It’s small, lightweight and oh-so-useful.

Today, we’re continuting with my series of freebies to celebrate the Christmas season. Yesterday, I posted a set of snow textures, which have already been download a bunch of times. Today, we have some jQuery goodness, in the form a small-but-useful plugin.

So recently, I’ve been working on the development of a new application called Survd, which I’ll be posting about in much greater detail at some point next week. A large portion of the development uses the jQuery framework and I wrote a number of custom methods to introduce different bits of functionality that I needed.

One of my favorites is a little method I call WhatsThis?

Basically, the plugin is designed to add a simple information button beside a targeted element. When a user hovers over the button with their mouse, a simple tooltip pops up, providing more information about the element. It’s a great little technique for adding basic, inline help to a site or web application, so go ahead and grab it.

WhatsThis? jQuery Plugin (Downloaded 1071 times)

WhatsThis? jQuery Plugin (Downloaded 1071 times)

One important thing to note is that this plugin relies on the jQuery Tooltip plugin in order to function. If you are using or want to use a different tooltip plugin, it should be possible to modify the code to make it work.

The download package contains a full version of the .js file, along the jQuery library, the jQuery Tooltip plugin, and a demo page which explains the various options that can be used to configure each initialization of the plugin’s functionality. If you want to check out the demo page without actually downloading the entire package, I’ve also uploaded it here.

View the demo

So far, I’ve tested the plugin in recent versions of Firefox, Chrome, Safari and even Internet Explorer 8. It uses basic jQuery methods, so any browser that supports jQuery should be able to handle this one.

As with the Contained Sticky Scroll jQuery Plugin, if you have any questions or issues with the plugin, feel free to leave a comment. That being said, if the plugin becomes successful in the future, I may carve open a separate forum or something to deal with support requests.

Anyhow, go ahead and download the plugin. Have fun with it. If you do end up using it, I’d love to see it in action or hear your thoughts on it.

Post A Comment

Also from Echo Enduring Media:

An Unfolding Tale

About the Author

Matt Ward is a digital artist who lances freely under the moniker of Echo Enduring Media, and specializes in graphics design, illustration and writing. He is also the Creative Director for Highland Marketing, a creative direct marketing company based out of Waterloo, Ontario. You can follow Matt on Twitter

Like this post? Help Promote it!

Comments

Dec 24, 2010

Gor says:

link to the demo is hosed

Dec 24, 2010

fred says:

thanx for the article but the link to the demo is broken… 404…

Dec 24, 2010

Matt Ward says:

Demo should be all fixed now.

Dec 25, 2010

Pablo Díaz says:

Great! and… yes, broken link is fixed! Thanks.

Dec 25, 2010

Kim Røen says:

Love all the stuff you do, but maybe it should be possible to tap these so they are accessible to touchscreen-users as well?

Dec 31, 2010

Keri says:

This is an awesome plugin. Can’t wait for an opportunity to use it. Thanks for making it a freebie =)

Aug 5, 2011

Jim Wurster says:

This looks pretty cool and what I’ve been looking for except I want it to float to the left. I’m using in WordPress and want to be able to control the width. Can you tell me if that is easily done.

Thank you, jim

Leave a Comment

Links

Top Commenters

Thanks so much to these awesome people for joining in on the discussion!

Copyright © Echo Enduring Media 2009-2014