Css Tooltip Without Using Javascript

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

tooltip

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…

2 thoughts on “Css Tooltip Without Using Javascript

  1. Pingback: column span

Leave a Reply

Your email address will not be published. Required fields are marked *