Posted by: Bruno | December 15, 2008

Tutorial: jQuery Tooltip

A while ago I’ve been asked to do some kind of tooltip for picture, some kind of bubble overing over an image using jQuery. I of course tried the easy way and went through unnecessarily complex and rather useless plug-ins for jQuery. I won’t mention them for the sole reason they’re a litteral pain to manage and use. But did I managed to do the said tooltip with a very minimal amount of work and a little sprinkle of ingenuity.

It’s a very simple way to get awesome result, but I couldn’t do it if it wasn’t for the code I found on an article of CSS Globe written by Allen Grakalic. You can view his article following the link here.

The script needed for having a tooltip over every link is available here: http://www.zerodsworkshop.com/demo_tooltip/tooltip_script.zip

For this you will need to include the jQuery framework and the little modified script I have devised into your page

< script type="text/javascript" src="yoursite/jquery.js" ></script><!-- jQUERY FRAMEWORK -->
< script type="text/javascript" src="yoursite/tooltip.js" ></script><!-- TOOLTIP SCRIPT-->

Then you will have to initiate the jQuery tooltip with the it’s own function inside a jQuery(document).ready(function(){    })  clause:

tooltip();

Finally, coat your tooltip with some CSS, the tooltip’s id is #tooltip and you will need 2 important properties: position:abolute and display:none

Once done, the rest of the insertion is VERY simple. All you have to do is insert the “tooltip” class and write whatever you wish to display into the title of the link.

<a href="#" class="tooltip" title="FOO BAR">Foo Bar</a>

Whatever the link’s lenght (An image, a long text link, whatever else), the tool tip will gently fade in. For a example and a basic source code, visit this link.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Categories

%d bloggers like this: