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下都可以使用.