鼠标放在链接出现一个小框框的提示信息

2015/12/08 52562
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>鼠标放在链接出现一个小框框的提示信息</title>
<style type="text/css">
<!--
.tooltip {position: relative;}/*定义tooltip类的定位类型为相对*/
a.tooltip span {display: none;}/*定义tooptip类链接对象元素span显示为不显示*/
a.tooltip:hover span {    /*定义鼠标放在链接元素上的显示*/
 display: block;         /*显示块状*/
 position: absolute;    /*显示定位类型为绝对*/
 top:1em; /*距离顶部1em*/
 left:2em;/*距离左边距离2em*/
font-family: Arial, Helvetica, sans-serif;
 font-weight: normal;
 color: #FFFFFF;
 background-color: #999999;
 text-decoration: none;
 height: auto;
 width: 150px;
 border: 1px solid #cccccc;
 font-size: 12px;
}
a.tooltip:hover{/*这段就是奇怪的代码咯：设置鼠标放在链接上显示文字大小为100%*/
font-size: 100%;
}
-->
</style>
</head>

<body>
<p><a href="http://www.bitefu.net" class="tooltip">Farflight<span>名称:比特福<br>电话</span></a></p></body>
</html>
代码片段
