<!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> <title></title> <style type="text/css"> .tooltip { position: absolute; } </style> <script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { var x = 10; var y = 20; $("a.cooltip").mouseover(function (e) { var tooltip = "<div id='tooltip'>" + this.title + "</div>"; //创建<div> $("body").append(tooltip); $("#tooltip").css( { "top": e.pageY + "px", "left": e.pageX + "px" } ).show("fast"); //设置X坐标和Y坐标，并且显示 }).mouseout(function () { $("#tooltip").remove(); //移除 }).mousemove(function (e) { $("#tooltip").css( { "top": e.pageY + "px", "left": e.pageX + "px" }); }); }); </script> </head> <body> <p> <a href="#" class="cooltip" title="这是我的超链接提示1.">提示</a></p> <p> <a href="#" class="cooltip" title="这是我的超链接提示1.">提示</a></p> <p> <a href="#" title="这是自带超链接提示1.">提示</a></p> <p> <a href="#" title="这是自带超链接提示1.">提示</a></p> </body> </html>