一、第一种方法用Jquery
<p><a href="http://www.nowamagic.net/" class="tooltip" title="欢迎访问可咔酷">欢迎访问可咔酷</a></p>
然后为class为tooltip的超链接添加mouseover和mouseout事件：
$("a.tooltip").mouseover(function (){ //显示 title }).mouseout(function (){ //隐藏 title });
实现这个效果的具体思路如下：
1.当鼠标滑入超链接时， 创建一个div元素，div元素的内容为title属性的值。然后将创建的元素追加到文档中。为它设置x坐标和y坐标，使它显示在鼠标位置的旁边。
2.当鼠标滑出超链接时，移除div元素。
根据分析的思路，写出如下JQuery代码：
$(function(){ var x = 10; var y = 20; $("a.tooltip").mouseover(function(e){ this.myTitle = this.title; this.title = ""; var tooltip = "<div id='tooltip'>"+ this.myTitle +"</div>"; //创建 div 元素 $("body").append(tooltip); //把它追加到文档中 $("#tooltip") .css({ "top": (e.pageY + y) + "px", "left": (e.pageX + x) + "px" }).show("fast"); //设置x坐标和y坐标，并且显示 }).mouseout(function(){ this.title = this.myTitle; $("#tooltip").remove(); //移除 }); });
二、第二种方法，不用Jquery用Css
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 5 <meta name="Author" content="Aultoale" /> 6 <style type="text/css"> 7 *{padding:0px;margin:0px;} 8 body {font:normal 12px Verdana;} 9 ul{list-style:none;margin:130px;} 10 li{line-height:30px;} 11 ul li a span{display:none;} 12 a:link,a:hover:{display:block;} 13 ul li a:hover span{display:inline;border:1px solid #F96;background:#FFEFEF;color:#009933;padding:10px;} 14 15 </style> 16 </head> 17 <body> 18 <ul> 19 <li><a href="#">这里是第1个连接<span>这里是说明文字</span></a></li> 20 <li><a href="#">这里是第2个连接<span>这里是说明文字</span></a></li> 21 <li><a href="#">这里是第3个连接<span>这里是说明文字</span></a></li> 22 </ul> 23 </body> 24 </html>