Pure CSS Tooltip

Submitted by:Andery Smith

Date added:27 February, 2013

Category:CSS

An example pure CSS Tooltip

Tags: tooltip

Code Snippet:

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

Comments