无文字描述，直接上测试页，看效果。
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3
4 <style>
5 #tplink{border:1px solid red; background:#FF6;
6 position:absolute;
7 padding:1px;
8 color:red;
9 display:none;
10 border-radius: 3px;
11 }
12 </style>
13 <script type="text/javascript" src="jquery\v1.8.3\jquery.min.js"></script>
14 <script type="text/javascript">
15 $(function(){
16 var x=-210;
17 var y=-160;
18 $("a.tplink").mouseover(function(e){
19 this.myTitle=this.title;
20 this.title="";
21 var tooltip="<div id=‘tplink‘>"+this.myTitle+"</div>"; //创建DIV元素
22 $("#link").append(tooltip); //追加到文档中
23 $("#tplink").css({"top": (e.pageY+y) + "px","left": (e.pageX+x) + "px"}).show(); //设置X Y坐标， 并且显示
24 }).mouseout(function(){
25 this.title=this.myTitle;
26 $("#tplink").remove(); //移除
27 }).mousemove(function(e){
28 $("#tplink").css({"top": (e.pageY+y) + "px","left": (e.pageX+x) + "px"});
29 })
30 })
31 </script>
32 <title>超链接title样式修改</title>
33 </head>
34
35 <body>
36 <div id="link">
37 <p><a href="#" class="tplink" title="自定义title">自定义title</a></p>
38 <p><a href="#" title="默认title">默认title</a></p>
39 </div>
40 </body>
41 </html>
效果图：
时间： 2024-10-11 13:47:03