Stylish and pure CSS based tooltip

Now I am describing how you will design fancy Toot tip with help of CSS.This is pure css tool tip which will customized by you based on your requirement.There are a lot of css library(bootstrap,Foundation etc) available in market which can be used to create awesome tooltip but if you want your customized pure css based tooltip then you need to follow below steps.This tool tip style created by Pure CSS class and selector.

Also checkout other tooltip tutorials,

Simple Example of Pure CSS Tooltips

Below are CSS class

Select Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
a.info {  
font-family:verdana,arial,helvetica,sans-serif;  
position:relative;  
border-bottom:1px dashed #ccc;  
text-decoration:none;  
color:#333333;  
}  
/* Added to solve the z-order problem of IE */  
a.info:hover {  
    z-index:2;  
}  
/* End */  
a.info span{  
    display: none;  
}  
a.info:hover span{  
 display:block;  
 position:absolute;  
 z-index:1;  
 bottom:2em;  
 left:-3em;  
 width:23em;  
 border:1px solid #F2AF1D;  
 background-color:#FDF1D5;  
 color:#000;  
 text-align:justify;  
 font-size:10px;  
 font-weight:normal;  
 padding:3px;  
 line-height:15px;  
}

Above class creating css layout of tooltip and applying popover on hover of info class.

Use of pure css based tooltip on HTML element

Select Code
1
<a href="javascript:void(null)" class="info">Testtooltip<span>Simple and Pure CSS based tooltip</span></a>

Simple Example and Demo of CSS based tooltip

css-based-tooltip

Download source code and Demo Of Pure CSS tooltip

Please feel free to send queries to me using below comment section.