<!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>
