1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" 2 "http://www.w3.org/TR/html4/strict.dtd"> 3 4 <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> 5 <head> 6 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 7 <title>test</title> 8 <meta name="author" content="Administrator" /> 9 <script type="text/javascript" src="script/jquery-1.12.2.js"></script> 10 <!-- Date: 2016-03-23 --> 11 </head> 12 <body> 13 <p> 14 <a href="#" class="tooltip" title="这是我的超链接提示1">提示1</a> 15 </p> 16 <p> 17 <a href="#" class="tooltip" title="这是我的超链接提示2">提示2</a> 18 </p> 19 <p> 20 <a href="#" title="这是自带提示1">自带提示1</a> 21 </p> 22 <p> 23 <a href="#" title="这是自带提示2">自带提示2</a> 24 </p> 25 <script type="text/javascript"> 26 $(function() { 27 $("a.tooltip").mouseover(function(e) { 28 //创建div元素 29 var tooltip = "<div id = 'tooltip'>" + this.title + "</div>"; 30 $("body").append(tooltip); 31 //追加到文档。 32 $("#tooltip").css({ 33 "float":"right", 34 "font-size":"30px" 35 }).show(); 36 }).mouseout(function() { 37 $("#tooltip").remove(); 38 }); 39 }); 40 </script> 41 </body> 42 </html>