How to Build a Sexy Tooltip with jQuery TOOLS

July 25, 2010 at 2:26 pm | Blog | 3 comments

A tooltip is an important way to show additional information. But if it is designed in a very plain way, no one will even notice these additional information. So an eye attracting tooltip is as important as the other content design. If you have visited my website before, you must have noticed that i upgrade the home page a little with adding some sexy tooltip there. isn’t impressive? Ok, are your ready to adopt one as well? Good, it is really simple to follow. Let’s start.

Let’s see the final result first:
move your mouse over the link please:

step1: download jQuery Tooltip

jQuery tooltip is one of the jQuery UI plugins from jQuery TOOLs. they provide several very nice UI plugins, like tab, scrollable, of course tooltip, etc. And most important, they are free of charge. Please go to jQuery TOOLs to download. For this tutorial, we only need to download tooltip.

For development purpose, i usually download the debug version, and then switch to the min version for production. As we only want to use tooltip, so i leave the others unchecked. You always need to keep into mind that keep the file as small as possible, to keep the traffice low and performance better. I take for grant that you have already have jQuery for you development, but if you don’t, you can also download the 1.4.2 version in the same page.
besides the javascript file. we need to download the tooltip images too.

Go to the tooltip document page http://flowplayer.org/tools/tooltip/index.html download the tooltip.zip file. Ok we have got all we needed. we can code now!!

step2: Html markup

jQuery tooltip can be used on image, link, div, table, almost everything. For this tutorial, we use the simplest way, but achieve the same impressive result (you will see shortly), a tooltip on a href link.

1
2
3
4
5

<div id="tooltip_demo">
 
<a href="#" title="this is a sexy tooltip">move your mouse over</a>
 
</div>

this code snippet is very simple and straight forward. a link with a title “this is a sexy tooltip” .
before we add the javascript, it is looks like:

very plain, move your mouse over? nothing surprise right?

step3: add javascript

just the jQuery style, simple. we query the link, and make the title attribute as a tooltip, by the following selector:

1

$('#tooltip_demo a[title]')

and then call the function tooltip(), the final code snippet is:

1
2
3
4
5
6
7
8
9

<script type="text/javascript">
 
jQuery(document).ready(function($) {
 
$('#tooltip_demo a[title]').tooltip();
 
});
 
</script>

if you check out the result, you’ll find it is not what you want and it is a little ugly right? but we are almost there. what we need is to add style to the tooltip.

step4: add style for the tooltip

the tooltip() function generates the tooltip element automatically and assigns the CSS class name tooltip to it. It should be initially hidden by the CSS by setting display: none. and we need to use the image downloaded in the first step as a background for the tooltip. if you put your image in the images/tooltip folder and use the black_arrow.png. just follow the css.

1
2
3
4
5
6
7
8
9
10

* tooltip styling. by default the element to be styled is .tooltip  */
.tooltip {
           display:none;
           background:transparent url(images/tooltip/black_arrow.png);
           font-size:12px;
           height:70px;
           width:160px;
           padding:25px;
          color:#fff;
}

Finally, see the result

when user move his mouse over the href link, the sexy tooltip will show.

Conclusion

This is a very simple way to use this tooltip, only several lines of code improve the website’s quality. In fact you can use it in the wordpress. define a class to the images, links, and add the script in the header. just add a class to the links in the post or anything else, the sexy tooltip is just ready. Try your mouse over the advertise picture.

It is really easy to code up a sexy tooltip. and this tool is really powerful and well documented. User can do a lot with this tool.

and i hope you get something from this post. Thanks for reading.

Reference

http://flowplayer.org/tools/demos/tooltip/index.html
http://flowplayer.org/tools/download/index.html

<< Back to Blog Discuss this post