css做出丰富的Tooltips

 

插入代码：

<br /><br /><br /><br /><br />
<a class="tooltips" href="#tooltips">ihandu<span>dUcky的私生活</span></a>

<style type="text/css">

a:link,a:visited{text-decoration: none;font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 12px;color: #453739;}
a:hover{color: #C86F70;text-decoration: none;}

/*Tooltips*/
.tooltips{
position:relative; /*这个是把框定位在文字旁边*/
z-index:2;
}

.tooltips:hover{
z-index:3;
background:none; /*没有这个在IE中不可用*/
}

.tooltips span{
display: none; /*一般状态不显示span里的字符*/
}

.tooltips:hover span{ /*span 标签仅在 :hover 状态时显示*/
display:block;
position:absolute;
top:21px;
left:9px;
width:15em;
border:1px solid #C7BC98;
background-color:#EBE2C8;
padding: 3px;
color:black;
}

</style>

用这个方法可以作出很多样式的Tooltips,这个方法在ie以及firefox下都可以使用.