A pure CSS implementation of the mouse text when the message prompts

<a class= "tooltips" href= "#tooltips" > This is the tooltips<span> you see, these additional explanatory words are displayed when the mouse passes by. </span></a>
<style type= "Text/css" >
/*tooltips*/
. tooltips{
position:relative; * * This is the key *
Z-index:2;
}
. tooltips:hover{
Z-index:3;
Background:none; /* No this is not available in IE.
}
. ToolTips span{
Display:none;
}
. Tooltips:hover span{/*span label is displayed only in: hover state * *
Display:block;
Position:absolute;
top:21px;
left:9px;
Width:15em;
BORDER:1PX solid black;
Background-color: #ccFFFF;
padding:3px;
Color:black;
}
</style>