Nice and easy tool tip

July 16, 2009

I found this snippet of code from somewhere on internet which is simple yet elegant.  Idea here is pretty simple:  hide tooltip originally using CSS display property and show it when mouse hover over it.

Usage :

<a class=’tooltip’ href=’#’>link text goes here <span> tool tip text goes here….</span></a>

CSS needed:

<style type=”text/css”>

a:hover {background:#ffffff; text-decoration:none;}
a.tooltip span {display:none; padding:2px 3px; margin-left:8px; width:130px;}
a.tooltip:hover span{display:inline; position:absolute; background:#ffffff; border:1px solid #cccccc; color:#6c6c6c;}

</style>

Advertisements

2 Responses to “Nice and easy tool tip”


  1. […] # ffffff; text-decoration : none;) a.tooltip span (display: none; padding: 2px 3px; […] From: N Rao Lakkakula’s Blog. Continue reading. Categorie:Senza categoria Tag: Commenti (0) Trackbacks (0) Lascia un […]


  2. Hi! This is my first visit to your blog! We are a collection of volunteers and starting a
    new project in a community in the same niche. Your blog provided us useful information to work
    on. You have done a marvellous job!


Leave a Reply

Fill in your details below or click an icon to log in:

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: