Pure CSS tooltip, validation hints

CSS TOOLTIP

This is a simple css tool tip works on links hover property.
It works on Image / text link.

The CSS code is here …

a.info {text-decoration:none; position:relative;color:#fff;}
a.info span {display:none;color:#fff;}
a.info:hover {cursor:default;color:#fff;}
a.info:hover .infobox
{
font-weight: normal;
color:#fff;
font-family:verdana;
display:block;
position:absolute;
top:0;
left:0;
width:190px;
height:80px;
border:1px solid #FFF;
background:url(../images/overlay.png) repeat ;
text-align:left;
font-size:0.7em;
padding-left:10px;
padding-top:10px;
}

The Html code is here…
for image link

<a class="info" href="#"><img src="image/my-image.jpg" alt="" /><span class="infobox"> Text to be display in tooltip </span> </a>

for text link

<a class="info" href="#"> My link
 <span class="infobox">Text to be display in tooltip </span>
</a>

Try it out. Its simple n easy. the transparent image for tooltip background is provided here. You can download it by right clicking option “save picture as”

overlay image

 you can give any background to this span. Also you can use “DIV” instead of span.

Thanks. Hope it will be Useful.