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