Best 2 Know

The Ultimate Blogging Resource

TipTip Jquery - Change Default Hyperlink's Title Style

Long time not posting... Now I'll share how to integrate TipTip Jquery plugin to your blog. This plugin will change the default title attribute style become interest one. Don't worry, this plugin is containing no images, it's all using CSS, so it will load lightly. But, this plugin will not work in IE that we know doesn't support CSS3.

Well, I don't have any words again, so let's go to the steps

Javascript

To use the plugins from Jquery, we must add the library script from jquery. Find </head> and paste the script below above </head>.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/> 

If you have already add this code, you no longer need to add this code again.

After that, add the script below. This script is the core of TipTip Jquery.

&lt;script src='http://mbahrizh.googlecode.com/files/jquery.tipTip.js' type='text/javascript'/&gt; 

Also add this script. This script to call the TipTip Jquery.

<script type="text/javascript">
$(function(){
$(".tooltip").tipTip();
});
</script> 

 

CSS

This plugin use bundled CSS file, so copy code below before </head>.

<link rel="stylesheet" href="http://mbahrizh.googlecode.com/files/tipTip.css" /> 

 

HTML

To activate TipTip, you must add class and title attribute to your tag, such as a, div, p, input, etc.
Example below use a tag

<a href='YOUR-LINK-HERE' class='tooltip' title='THIS IS THE TITLE COLUMN OR YOU CAN ADD DESCRIPTION' >This is a link</a> 

If you hover at that link, the container which contain the title attribute will show interestly with some CSS styles.

Some Options

You can add following options to customize it as you wish. Example below is added maxwidth and edgeoffset option.

$(function(){
$(".tooltip").tipTip({maxWidth: "auto", edgeOffset: 10});
}); 

Some other options:

  • activation: string ("hover" by default) - jQuery method TipTip is activated with. Can be set to: "hover", "focus" or "click".
  • keepAlive: true or false (false by default) - When set to true the TipTip will only fadeout when you hover over the actual TipTip and then hover off of it.
  • maxWidth: string ("200px" by default) - CSS max-width property for the TipTip element. This is a string so you can apply a percentage rule or 'auto'.
  • edgeOffset: number (3 by default) - Distances the TipTip popup from the element with TipTip applied to it by the number of pixels specified.
  • defaultPosition: string ("bottom" by default) - Default orientation TipTip should show up as. You can set it to: "top", "bottom", "left" or "right"
  • delay: number (400 by default) - Number of milliseconds to delay before showing the TipTip popup after you mouseover an element with TipTip applied to it.

Thats all. See you!!!

Note : If you want completely CSS based tooltip you can click here.