Revision: 7345
Initial Code
Initial URL
Initial Description
Initial Title
Initial Tags
Initial Language
at July 18, 2008 15:51 by fredaudet
Initial Code
<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>
Initial URL
Initial Description
Initial Title
Pure CSS Tooltip
Initial Tags
css, html
Initial Language
HTML