标签：
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 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>文字提示</title> 6 <!-- 引入jQuery --> 7 <script src="../js/jquery-1.4.2.js" type="text/javascript"></script> 8 <style type="text/css"> 9 body{ 10 margin:0; 11 padding:40px; 12 background:#fff; 13 font:80% Arial, Helvetica, sans-serif; 14 color:#555; 15 line-height:180%; 16 } 17 p{ 18 clear:both; 19 margin:0; 20 padding:.5em 0; 21 } 22 /* tooltip */ 23 #tooltip{ 24 position:absolute; 25 border:1px solid #333; 26 background:#f7f5d1; 27 padding:1px; 28 color:#333; 29 display:none; 30 } 31 </style> 32 <script type="text/javascript"> 33 $(document).ready(function(){ 34 var x = 10; 35 var y = 20; 36 $("a.tooltip").mouseover(function(e){ 37 this.myTitle=this.title; 38 this.title=""; 39 var div = "<div id=‘tooltip‘>"+this.myTitle+"</div>" 40 $("body").append(div); 41 $("#tooltip").css({ 42 "top":e.pageY+y+"px", 43 "left":e.pageX+x+"px" 44 }).show("fast"); 45 }).mouseout(function(){ 46 this.title=this.myTitle; 47 $("#tooltip").remove(); 48 }).mousemove(function(e){ 49 $("#tooltip").css({ 50 "top":e.pageY+y+"px", 51 "left":e.pageX+x+"px" 52 }) 53 }) 54 55 }) 56 </script> 57 </head> 58 <body> 59 <p><a href="#" class="tooltip" title="这是我的超链接提示1.">提示1.</a></p> 60 <p><a href="#" class="tooltip" title="这是我的超链接提示2.">提示2.</a></p> 61 <p><a href="#" title="这是自带提示1.">自带提示1.</a></p> 62 <p><a href="#" title="这是自带提示2.">自带提示2.</a> </p> 63 <!-- Resources from http://down.liehuo.net --> 64 </body> 65 </html>
标签：
原文地址：http://www.cnblogs.com/dream90/p/4870203.html
