make tooltips using css

 

Here’s a nice easy method for making link tooltips entirely in CSS, without any Javascript. For a demonstration of what I mean, hover over this link with your mouse.

To do this, you will need to create a class for the links which require tooltips, and a within that link to include the tooltip text:

this is a link This is a tooltip

I have put some spaces inside the tooltip span on both sides, so those with CSS turned off don’t view the link and tooltip text as being scrunched together.

Then add the following styling:

a.tooltiplink span {display:none; }

a.tooltiplink:hover span { display:inline; position:absolute; padding:5px; color:#0c0; background-color:#eee; border:1px solid #000; text-decoration:none; }

The first line ensures the tooltip  is hidden, the second line reveals the  when the link is hovered over. It does this by switching the ‘display’ from ‘none’ to ‘inline’. The second line also adds some visual styling such as padding, text colour, background colour, and a border. Finally it adds ‘text-decoration:none’, so it does not inherit the underline from the link.

However, There is still a little tweak we need to apply to this CSS, as IE 6 has problems rendering the tooltips. This is easily fixed by adding a font-size to the hover:

a.tooltiplink:hover { font-size:100%; } /* IE6 fix */

I am not sure why this works, as setting the font-size shouldn’t make any difference at all. Suffice to say IE 6 is full of unique little quirks!

So there you have it, tooltips with no Javascript involved.

For example see how css tooltips can look –

http://downloads.sixrevisions.com/css-tooltips/index.html

 

Please give sug