1 超链接提示
<a href="#" title="这是我的超链接提示1"> 提示 </a>
一般用 title 标签提示，缺点是响应速度慢，用 jQ 来手写类似功能。
HTML
<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">自带提示2</a></p> <p><a href="#" title="这是自带提示2">自带提示2</a></p>
CSS
body{ margin:0; padding:40px; background:#fff; font:80% Arial, Helvetica, sans-serif; color:#555; line-height:180%; } p{ clear:both; margin:0; padding:.5em 0; } /* tooltip */ #tooltip{ position:absolute; border:1px solid #333; background:#f7f5d1; padding:1px; color:#333; display:none; }
鼠标移动文字上，会显示 title 属性的文字
为 class 为 tooltip 的超链接添加 mouseover 和 mouseout 事件
<script type="text/javascript"> $("a.tooltip").mouseover(function(){ // 显示 title }).mouseout(function(){ // 隐藏 title }) </script>
思路：
（1）当鼠标划入超链接
①创建一个<div>元素，内容为title值
②将创建的元素追加到文档中
③为它设置 X 坐标和 Y 坐标，使它显示在鼠标位置的旁边
（2）当鼠标画出超链接时，移除<div>元素
jQuery
<script type="text/javascript"> $(function(){ $("a.tooltip").mouseover(function(e){ var tooltip = "<div id='tooltip'>" + this.title+"</div>"; //创建 div 元素 $("body").append(tooltip); // 将它追加到文档中 $("#tooltip") .css({ "top":e.pageY + "px", "left":e.pageX + "px" }).show("fast"); // 设置X坐标和Y坐标，并显示 }).mouseout(function(){ $("#tooltip").remove(); }) }) </script>
运行效果有2个问题，当鼠标滑过后，<a> 标签中的title属性提示也会出现，其次是设置 x和y坐标的问题，由于自制的提示与鼠标的距离太近，有时候会引起无法提示
首先移除<a>标签中的title提示功能
①当鼠标滑入时，给对象添加一个新属性。并把title值传给这个属性，然后清空属性title值
this.myTitle = this.title; this.title = ""; var tooltip = "<div id='tooltip'>"+this.title+"</div>"; //创建 <div> 元素
②当鼠标滑出时，再把对象的 myTitle 属性的值又赋给属性 title
this.title = this.myTitle;
• 为什么当鼠标滑出时，又把属性值赋给 title？？
因为当鼠标滑出时，需要考虑再次滑入时的 title 值，如果不将 myTitle 的值重新赋给 title ，当再次滑入时，title 值将为空。
上述问题2，无法提示问题，可以重新设置 top 和 left 值
var x = 10; var y = 20; $("#tooltip").css({ "top": (e.pageY+y)+"px"; "left": (e.pageX+x)+"px"; })
全部修改后完整代码为：
<script type="text/javascript"> $(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>"; //创建 <div> 元素 $("body").append(tooltip); $("#tooltip") .css({ "top": (e.pageY+y)+"px", "left": (e.pageX+x)+"px" }).show("fast"); }).mouseout(function(e){ this.title = this.myTitle; $("#tooltip").remove(); }); }) </script>
当鼠标在超链接上移动时，提示效果不会跟着鼠标移动，可以为超链接加一个 mousemove 事件
$(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>"; //创建 div 元素 $("body").append(tooltip); //把它追加到文档中 $("#tooltip") .css({ "top": (e.pageY+y) + "px", "left": (e.pageX+x) + "px" }).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" }); }); })
2 图片提示效果
点击小图片时大图显示，并且大图随着鼠标移动而移动。
基本结构样式如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="jquery.min.js"></script> <style type="text/css"> body{ margin: 0; padding: 40px; font: 80% Arial,Helvetica,sans-serif; color: #555; background: #fff; line-height: 180%; } img{ border: none; } ul,li{ margin: 0;padding: 0; } li{ list-style: none; float: left; display: inline; margin-right: 10px; border: 1px solid #aaa; } /* tooltip */ #tooltip{ position: absolute; border: 1px solid #ccc; background: #333; padding: 2px; display: none; color: #fff; } </style> </head> <body> <ul> <li><a href="images/apple_1_bigger.jpg" class="tooltip" title="苹果 iPod"><img src="images/apple_1.jpg" alt="苹果 iPod" /></a></li> <li><a href="images/apple_2_bigger.jpg" class="tooltip" title="苹果 iPod nano"><img src="images/apple_2.jpg" alt="苹果 iPod nano"/></a></li> <li><a href="images/apple_3_bigger.jpg" class="tooltip" title="苹果 iPhone"><img src="images/apple_3.jpg" alt="苹果 iPhone"/></a></li> <li><a href="images/apple_4_bigger.jpg" class="tooltip" title="苹果 Mac"><img src="images/apple_4.jpg" alt="苹果 Mac"/></a></li> </ul> </body> </html>
§ 参考上例超链接提示效果。只需要修改 <div> 代码即可
var tooltip = "<div id='tooltip'>"+ this.myTitle +"</div>"; // 修改为 var tooltip = "<div id='tooltip'><img src='"+ this.href +"' alt='产品预览图'> </div>";
为加强效果，可在预览的大图下添加文字说明
方法：
可根据 title 值来获得图片相应的介绍文字
this.myTitle = this.title; this.title = ""; var imgTitle = this.myTitle ? "<br/>" + this.myTitle : "";
然后将它追加到 <div> 元素中
var tooltip = "<div id='tooltip'><img src='"+ this.href +"' alt='产品预览图'/>"+imgTitle+"</div>"; //创建 div 元素
上述 var a = b ? c : d ; 是三元运算符。（声明a ，它的值为 b ，如果 b 为真，取值为 c ，否则取值为 d）
var imgTitle = this.myTitle? "<br/>" + this.myTitle : ""; //等价于 var imgTitle; if(this.myTitle){ imgTitle = "<br/>" + this.myTitle; }else{ imgTitle = ""; }
完整代码：
<script type="text/javascript"> $(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='产品预览图'/>"+imgTitle+"</div>"; //创建 div 元素 $("body").append(tooltip); //把它追加到文档中 $("#tooltip") .css({ "top": (e.pageY+y) + "px", "left": (e.pageX+x) + "px" }).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" }); }); }) </script>