Knowledge Base Navigation

Articles: 51 Categories: 8

KB Article: Pure CSS Tool Tip

Article:Pure CSS Tool Tip    
Submitted By:Taut
Date Added:09-11-2009 10:31:56
Hits:990



Forget the standard IE tool tip, this little snippet can be altered in CSS to any colour or size you want. Great for highlighting important information or helping users with contact form fields or adding detail to images.


<a href="#">Roll over here <span>Pure Css Tooltip</span></a>
<style type="text/css">
/* general */    
body {      
   margin:0;      
   padding:40px 80px;      
   background:#fff;      
   font:70% Arial, Helvetica, sans-serif;      
   color:#555;      
   line-height:180%;      
}   
h1, h2{      
   font-size:180%;      
   font-weight:normal;      
   color:#555;      
}   
h2{      
   font-size:140%;      
}      
p{      
   margin:1em 0;      
   width:500px;      
}   
a{      
   color:#f20;      
   text-decoration:none;      
}   
a:hover{      
   color:#999;      
}    
/* // here comes the goodnes  */          
a{         
   z-index:10;         
}      
a:hover{         
   position:relative;         
   z-index:100;         
}               
a span{         
   display:none;         
}      
a:hover span{         
   display:block;         
   position:absolute;         
   float:left;         
   white-space:nowrap;         
   top:-2.2em;         
   left:.5em;         
   background:#fffcd1;         
   border:1px solid #444;         
   color:#444;         
   padding:1px 5px;         
   z-index:10;                  
}             
/* // goodnes  */
/* // general */
</style>

Current rating: 7.33 by 6 users
Please take one second and rate this article...

Not a Chance 12345678910 Absolutely

Please register or sign-in to post comments.


Jump to a selected article...