CSS3 Tooltip effect

Tooltip is a small popup box which opens when you hover any element. This popup box gives some brief information about that element.

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

Step 1: HTML

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="https://twitter.com/TutWorld_Net" rel="me" target="_blank" title="Follow us on Twitter"><img src="twitter.png"/></a>
 <a class="tooltip" href="https://www.facebook.com/tutorialworld.net" rel="me" target="_blank" title="Tutorialworld on Facebook"><img src="facebook.png"/></a>

 

Step 2: CSS

Save  this css your  stylesheet

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 Have done !!

 

Demo CSS3 Tooltip effect 

CSS3 Tooltip effect