注释部分同样可以实现，鼠标移文字上固定位置显示title，不显示默认的title;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body { margin: 0; padding: 40px; background: #fff; font: 80% Arial, Helvetica, sans-serif; color: #555; line-height: 180%; } p { clear: both; margin: 0; padding: .5em 0; } /* tooltip */ #tooltip { position: absolute; border: 1px solid #333; background: #f7f5d1; padding: 1px; color: #333; display: none; } </style> <script src="js/jquery-1.11.3.min.js"></script> <script> $(function () { // var v; var x=10; var y=20; $("a.tooltip").mouseover(function (e) { // v=$(this).attr("title");//把class .tooltip中的值取到 // $(this).attr("title","");//把原来的titile清空 this.myTitle=this.title; this.title=""; var tooltip=$("<div id='tooltip'>"+this.myTitle+"</div>");//把class .tooltip中的值传给新元素#tooltip tooltip.appendTo("body"); var json={ "top":e.pageY+y+"px", "left":e.pageX+x+"px"}; $("#tooltip").css(json).show("fast"); }).mouseout(function () { $("#tooltip").remove();//把元素删除，不能用hide(); // $(this).attr("title",v);//把原来的属性值添加回来 this.title=this.myTitle; }); }) </script> </head> </head> <body> <p><a href="#" class="tooltip" title="这是我的超链接提示1.">提示1.</a></p> <p><a href="#" class="tooltip" title="这是我的超链接提示2.">提示2.</a></p> <p><a href="#" title="这是自带提示1.">自带提示1.</a></p> <p><a href="#" title="这是自带提示2.">自带提示2.</a></p> </body> </html>