<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <style> .btn{ display: block; width: 100px; height: 30px; border-radius: 6px; background: #cccc00; font: 14px/30px arial; text-align: center; text-decoration: none; color: #FFF8F1; transition: all .18s .1s; margin: 10px; } </style> </head> <body> <a href="#" class="btn" title="按钮元件">btn</a> <script> $(function(){ $('a.btn').mouseover(function(e){ var x = 10; var y = 10; this.myTitle = this.title; this.title = ''; var tooltip = '<div id="tooltip">'+this.myTitle+'</div>' $('body').append(tooltip); $('#tooltip') .css({ 'position':'fixed', 'top':(e.pageY+y)+'px', 'left':(e.pageX+x)+'px' }).show('fast'); }).mouseout(function(){ this.title = this.myTitle; $('#tooltip').remove(); }).mousemove(function(e){ var x = 10; var y = 10; $('#tooltip') .css({ 'top':(e.pageY+y)+'px', 'left':(e.pageX+x)+'px' }) }) }) </script> </body> </html>