<p><a href="#" title="超鏈接提示1" class="tooltip">提示1</a></p><p><a href="#" title="超鏈接提示2" class="tooltip">提示2</a></p><p><a href="#" title="自帶超鏈接提示1">自帶超鏈接提示1</a></p><p><a href="#" title="自帶超鏈接提示2">自帶超鏈接提示2</a></p>

  p a{display: block;width:150px;height:50px;line-height:50px;    background:#FF3366;color:#fff;border-radius: 3px;text-align: center;}  #tooltip{position:absolute;width:200px;height:50px;line-height:50px;border:1px solid #ccc;text-align: center;box-shadow: 1px 1px 2px #ccc;background:#fff;border-radius:5px;}

$(function(){    var x=10,y=20;//使得鼠標相對于tooltip偏離的距離    $("a.tooltip").mouseover(function(e){      this.myTitle=this.title;//獲取title，臨時存儲      this.title="";//避免和原生提示重復      var tooltip="<div id='tooltip'>"+this.myTitle+"</div>";      $("body").append(tooltip);      //css()設置樣式      $("#tooltip").css({        "top":(e.pageY+y)+"px",//e.pageX相對與文檔，e.clientX相對于可視區        "left":(e.pageX+x)+"px",      }).show("fast");    }).mouseout(function(){      this.title=this.myTitle;//重復恢復      $("#tooltip").remove();//記得要把生成的結點移除掉    }).mousemove(function(e){      $("#tooltip").css({        "left":(e.pageX+x)+"px",        "top":(e.pageY+y)+"px",      });    });  });

$(function(){    var x=10,y=20;    $("a.tooltip").mouseover(function(e){      this.myTitle=this.title;      this.title="";      var imgTitle=this.myTitle?"<br/><span id='tooltipspan'>"+this.myTitle+"</span>":"";      var tooltip="<div id='tooltip'><img src='"+this.href+"' alt='產品預覽圖'/>"+imgTitle+"</div>";      $("body").append(tooltip);      $("#tooltip").css({        "top":(e.pageY+y)+"px",        "left":(e.pageX+x)+"px",      }).show("fast");    }).mouseout(function(){      this.title=this.myTitle;      $("#tooltip").remove();    }).mousemove(function(e){      $("#tooltip").css({        "top":(e.pageY+y)+"px",        "left":(e.pageX+x)+"px",      })    });  });