CSS Tool Tip (no JavaScript)

Home \| Login \| Sitemap \| Contact us \| Wallpapers

Twitter \| Facebook \| Yahoo \| Google \| Firefox \| Gmail \| Security \| Tools \| more..

Tool tip using CSS and HTML

One day I was working on my site and I needed to show a few details about a particular post of a forum. I tried out many ways but it was getting a bit crowdy, a bit untidy. I thought the best way to deal with this is to go to various free script sites like dynamic drive

Click here to go to dynamicdrive.com

and found some great scripts. But the only thing I was worried about was the length of the scripts .. they are really big. Hence I started to google around and collected some helpful ingredients that can help me. I started working on it and at the end of the day I made it. Here's the trick on how to build a tool tip with the help of HTML and CSS only i.e. a tooltip without using JS. Also note that I have used to make the link work properly inside the tool tips.

( Place your mouse over the links ABOVE to see a live demo. )

This is the CSS code:


/* Tool tip css classes http://webtips.blogsome.com (Please keep this) */


/* (Adjust the width, height, colors, etc. according to your needs) */


a.css_tooltip {

position:relative;

text-decoration:none;

font-weight:normal;

border:0;

}



a.css_tooltip span {

display: none;

font-weight:normal;

cursor:auto;

}



a.css_tooltip:hover {

z-index:1;

background:transparent; /* In case you use a background image like a talkbubble */

font-weight:normal;

}



a.css_tooltip:hover span {

display:block;

position:absolute;

top:-42px;
 
left:-8px;
 
height:35px;
 
width:119px;
 
color:#000;

font-family:Verdana, Arial, Helvetica, sans-serif;

font-size:11px;

font-weight:normal;

padding:6px;

background: #eeeeee; 

border:1px solid #063; 

}

This is the HTML code:

<p style="margin: 20%">

<a class="css_tooltip" href="#" >

Take me to Google

<span>

<table style="background: transparent; font-size: 11px;" align="center" border="0" cellpadding="2" cellspacing="0">

<tr>

<td colspan="2" align="center">

Click here to go to <a href="http://www.google.com" onclick="window.location.href=this.href;return false">Google</a>

</td>

</tr>

</table>

</span>

</a>

</p>