24
Apr
2011

Tooltip effect with CSS3

Posted in: CSS 1 Comment

What is tool tip: Tooltip is a small popup box which opens when you hover any element. This popup box gives some brief information about that element. Thus ToolTip improves user interface of the website.

There are many good jQuery and Ajax based Tooltip effects, but let’s do same thing with the help of CSS3.

In this tutorial, I will add ToolTip effect to Twitter and Facebook social icons.

Step 1: HTML part

First let’s do HTML part. Get Twitter and Facebook icon, save the icon in images folder. Now use below code.

<a class="tooltip" href="http://www.twitter.com/techyag" rel="me" target="_blank" title="Follow me on Twitter"><img src="images/twitter.png" /></a> 
<a class="tooltip" href="http://www.facebook.com/techyag" rel="me" target="_blank" title="Be my friend on Facebook"><img src="images/facebook.png" /></a>

Step 2: CSS part

a{
text-decoration: none;
}
img{
border: none;
}
 
.tooltip{
float:left;
margin-right:10px;
width: 64px;
}

.tooltip:hover{

}

.tooltip:before{

}
 
.tooltip:hover::before{
content:attr(title);
width:180px;
display:block;
position:relative;
background:#747474;
border:1px solid #000000;
padding:6px;
margin: -33px 0 0 -7px;
border-radius: 6px;
color: #fff;
}

We are done !!

Demo

Check Live Demo

About the Author

Name: Ravi Shekhar
I love learning and sharing web stuffs.

Share this post

Twitter Facebook Google Buzz Digg StumbleUpon Delicious Technorati

1 Comment to "Tooltip effect with CSS3"

Add Comments (+)
  1. DirTek says:

    Awesome tutorial mate!

    Now this is something new…I’ll use this from now on when I’ll need it.

    Cheers!

Leave a Reply