<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{ margin: 0 ; padding: 0; } body{ position: relative; } #tooltip{ position: absolute; } </style> </head> <body> </div> <a href="#" title="这是a标签的title">我是个美女</a> </body> <script type="text/javascript" src="js/jquery-3.2.1.js"></script> <script type="text/javascript"> $(function(){ var x=10; var y=20; $('a').mouseover(function(e){ this.mytitle=this.title; this.title=""; var tooltip="<div id='tooltip'>"+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> </html>