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