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>
时间： 2024-10-15 13:47:13