<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gbk"> <title>test</title> <!--<link type="text/css" rel="stylesheet" href="css/head.css" />--> <style type="text/css"> </style> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> </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="这是自带提示1">自带提示2</a></p> <script type="text/javascript"> $(function(){ var x = 10; var y = 20; $("a.tooltip").mouseover(function(e){ this.myTitle = this.title; this.title = ""; var tooltip = "<div id='tooltip' style='position:absolute'>"+this.myTitle+"</div>"; $("body").append(tooltip); $("#tooltip").css({ "top": (e.pageY+y) + "px", "left": (e.pageX+x) + "px" }).show("fast"); }).mouseout(function(){ this.title = this.myTitle; $("#tooltip").remove(); }).mousemove(function(e){ $("#tooltip").css({ "top": (e.pageY+y) + "px", "left": (e.pageX+x) + "px", }); }); }) </script> </body> </html>
转载于:https://blog.51cto.com/linchqd/1321033