<!DOCTYPE html>
<html lang="en">
<style>
ul{list-style: none;}
li{float: left;margin-left: 20px;
}
li a{display: block;border:2px solid #ccc;}
#tooltip2{
position: absolute;
}
#tooltip{
position: absolute;
border:2px solid #ccc;
width: 300px;height: 300px;
}
</style>
<head>
<meta charset="UTF-8"> <script src="http://code.jquery.com/jquery-1.11.3.js"></script>
<title>Document</title>
<!-- <script type="text/javascript">
jQuery(document).ready(function($) {
var x=10;
var y=20;
$('a.tooltip').mouseover(function(event){
this.myTitle=this.title;
this.title='';//取消a的title属性，从而不会显示默认的
var tooltip='<div id="tooltip2">'+this.myTitle+'</div>';//把默认的赋值到鼠标移动上
$('body').append(tooltip);
$('#tooltip2').css({'top':(event.pageY+y)+'px',//event.pageY为当前鼠标的纵坐标
'left':(event.pageX+x)+'px'
}).show('fast');
}).mouseout(function(event){
this.title=this.myTitle;
$('#tooltip2').remove();
//remove是删除节点，而removeAttr()是删除属性
}).mousemove(function(event){
$('#tooltip2').css({'top':(event.pageY+y)+'px',
'left':(event.pageX+x)+'px'
});
});
});
</script>
<body> -->
<script type="text/javascript">
jQuery(document).ready(function($) {
var x=10;
var y=20;
$('li a').mouseover(function(e){
// this.myTitle=this.title;
// this.title='';
var ele=$('<div id="tooltip">'+this.title+'</div>');
$('body').append(ele);
$('#tooltip').css({'top':(e.pageY+y),'left':(e.pageX+x)}).show('fast');
}).mouseout(function(){
// this.title=this.myTitle;
$('#tooltip').remove();
}).mousemove(function(e){
$('#tooltip').css({'top':(e.pageY+y),'left':(e.pageX+x)}).show('fast');
});
});
</script>
</head>
<!-- <script type="text/javascript">
jQuery(document).ready(function($) {
var x=10;
var y=20;
$('a.tooltip').mouseover(function(event){
this.myTitle=this.title;
this.title='';//取消a的title属性，从而不会显示默认的
var imgTitle=this.myTitle?'<br/>'+this.myTitle:'';
var tooltip="<div id='tooltip2'><img src='"+this.href+"' alt='产品预览图'/>"+imgTitle+"</div>";
//把默认的赋值到鼠标移动上
$('body').append(tooltip);
$('#tooltip2').css({'top':(event.pageY+y)+'px',//event.pageY为当前鼠标的纵坐标
'left':(event.pageX+x)+'px'
}).show('fast');
}).mouseout(function(event){
this.title=this.myTitle;
$('#tooltip2').remove();
//remove是删除节点，而removeAttr()是删除属性
}).mousemove(function(event){
$('#tooltip2').css({'top':(event.pageY+y)+'px',
'left':(event.pageX+x)+'px'
});
});
});
</script> -->
<p><a href="#" class='tooltip' title='这是我的超链接提示1.'>提示1.</a></p>
<p><a href="#" class='tooltip' title='这是我的超链接提示2.'>提示2.</a></p>
<ul>
<li><a href="javascript:void(0);" title='<img src="image/1.webp" alt="未显示" id="tooltip">'><img src="image/1.webp" alt="未显示"></a></li>
<li><a href="javascript:void(0);" title='<img src="image/2.webp" alt="未显示" id="tooltip">'><img src="image/2.webp" alt="未显示"></a></li>
<li><a href="javascript:void(0);" title='<img src="image/3.webp" alt="未显示" id="tooltip">'><img src="image/3.webp" alt="未显示"></a></li>
<li><a href="javascript:void(0);" title='<img src="image/4.webp" alt="未显示" id="tooltip">'><img src="image/4.webp" alt="未显示"></a></li>
</ul>
</body>
</html>
<!-- 火狐不支持webp格式的图片 -->
在谷歌上可以运行，火狐和ie不支持webp格式，不能运行