Pure CSS tooltip, validation hints

CSS TOOLTIP

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 for tooltip background,css tooltip

overlay image

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

Thanks. Hope it will be Useful.

Advertisements

About Nikhil
Name : Nikhil Ughade UI Developer, Accidentally in design field, no turn back since then. Location : Pune (MH, INDIA) From : Amravati (MH,INDIA) College : VYWS's College Of Engg. Badnera, Amravati Hobby : Social Networking, Designing Web Sites, Photography, Reading Books. In Free time works for NGO.

2 Responses to Pure CSS tooltip, validation hints

  1. Nice information, I really appreciate the way you presented.Thanks for sharing..

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: