1，超链接提示效果
超链接自带的有提示效果的，这里就把自己定义的提示效果放在一起可以进行一下比较。示例代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB18030">
<title>jQuery test </title>
<script type ="text/javascript" src ="jquery.js" ></script>
<script type ="text/javascript">
$(document).ready(function(){
var x = 10;
var y = 20;
$("a.tooltip").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","color":"#00ff00"}).show("fast");//设置x坐标和y坐标，并显示
})
.mouseout(function(){
this.title = this.myTitle;
$("#tooltip").remove(); //移除
})
.mousemove(function(e){
$("#tooltip").css({"top":(e.pageY+y)+"px","left":(e.pageX+x)+"px","color":"#00ff00"});
});
});
</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 ="自带提示2.">自带提示2.</a></p>
</body>
</html>运行效果如下：
可以看到自定义的提示效果可以实现的效果更好些。而且可以设置的样式更多，是网页看起来更加的好看。
2，图片提示效果
示例代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB18030">
<title>jQuery test </title>
<script type ="text/javascript" src ="jquery.js" ></script>
<script type ="text/javascript">
$(document).ready(function(){
var x = 10;
var y = 20;
$("a.tooltip").mouseover(function(e){
this.myTitle = this.title;
this.title ="";
var imgTitle =this.myTitle?"<br/>"+this.myTitle:+"";
var tooltip ="<div id =‘tooltip‘><img src=‘"+this.href+"‘ alt =‘图片预览‘/>"+this.myTitle+"</div>";//这个地方要特别注意，要给this.href 外面添加单引号
$("body").append(tooltip); //将它追加到文档中
$("#tooltip").css({"top":(e.pageY+y)+"px","left":(e.pageX+x)+"px","color":"#00ff00"}).show("fast");//设置x坐标和y坐标，并显示
})
.mouseout(function(){
this.title = this.myTitle;
$("#tooltip").remove(); //移除
})
.mousemove(function(e){
$("#tooltip").css({"top":(e.pageY+y)+"px","left":(e.pageX+x)+"px","color":"#00ff00"});
});
});
</script>
</head>
<body>
<ul>
<li><a href ="http://img0.bdstatic.com/img/image/shouye/sheying0617.jpg" class ="tooltip" title ="小鸟"><img src ="http://img0.bdstatic.com/img/image/shouye/sheying0617.jpg" alt ="小鸟照片" /></a></li>
<li><a href ="http://img0.bdstatic.com/img/image/shouye/bizhi0617.jpg" class ="tooltip" title ="鲜花" ><img src ="http://img0.bdstatic.com/img/image/shouye/bizhi0617.jpg" alt ="鲜花图片" /></a></li>
</ul>
</body>
</html>运行效果如下：
原文地址：http://blog.csdn.net/hanhailong18/article/details/46534927
