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

*{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;}

Here is the magic code

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;
}

Step: 2 Basic HTML Structure

<div id="page">
<p>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.</SPAN></a>  Lorem ipsum dolor sit amet, consectetur adipiscing
 elit. Suspendisse potenti.Lorem ipsum dolor sit amet,</p>  

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut viverra 
dui nec risus. In eu neque a tortor lacinia rhoncus. In interdum
 <a href="#" class="tooltip">placerat<SPAN>Lorem ipsum dolor sit 
amet, consectetur adipiscing elit. Ut viverra dui nec risus.</SPAN></a>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse 
potenti.Lorem ipsum dolor sit amet,</p> 
 
<p>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.</SPAN></a>  Lorem ipsum dolor sit amet, consectetur adipiscing
 elit. Suspendisse potenti.Lorem ipsum dolor sit amet,</p>  
</div>

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

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

Filed under: Css, Tutorials by admin