In this i tutorial i will show you how to create css tooltip without using javascript this very simple and effective technique. I hope you will enjoy this post.

Here is the Screenshot

Step : 1 Basic Css Code

[code lang="css"]
*{margin:0; padding:0;}
body{font:100% normal Arial, Helvetica, sans-serif; }
p{color:#666; font-size:12px; line-height:150%; margin:0 0 10px 0;}
#page{ margin:0 auto; width:550px;}
[/code]

Here is the magic code

[code lang="css"]
a{color:#F00; font-size:12px;}

a:hover {   
    background:#fff;     /*background color for IE*/   
    text-decoration:none;   
}    
  
a.tooltip span {   
    display:none;    
    padding:5px 5px;    
    margin-left:3px; 
	margin-top:10px;   
    width:170px;
	font-size:12px;
	line-height:150%;
}   
  
a.tooltip:hover span{   
    display:inline;    
    position:absolute;    
    background:#F20F27;    
    border:1px solid #C30018;    
    color:#fff;
}   
[/code]

Step: 2 Basic HTML Structure

[code lang="htmlstrict"]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut viverra 
dui nec risus. In eu neque a tortor lacinia rhoncus. In interdum Lorem 
ipsum dolor sit amet, consectetur adipiscing elit. Ut viverra dui nec 
risus.  Lorem ipsum dolor sit amet, consectetur adipiscing
 elit. Suspendisse potenti.Lorem ipsum dolor sit amet,
  

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut viverra 
dui nec risus. In eu neque a tortor lacinia rhoncus. In interdum
 placeratLorem ipsum dolor sit 
amet, consectetur adipiscing elit. Ut viverra dui nec risus.
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse 
potenti.Lorem ipsum dolor sit amet,
 
 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut viverra
 dui nec risus. In eu neque a tortor lacinia rhoncus. In interdum Lorem 
ipsum dolor sit amet, consectetur adipiscing elit. Ut viverra dui nec 
risus.  Lorem ipsum dolor sit amet, consectetur adipiscing
 elit. Suspendisse potenti.Lorem ipsum dolor sit amet,
  

[/code]

Finally we have created three column css layout.
Download | View Demo

Please share your comments with us, we’d love to hear from you…