jquery的自定义鼠toolTip 标提示效果

利用标签title属性，使hover事件取代默认鼠标事件，显示浮动层。this.unbind().hover 就是这句代码。jquery帮我们做好很多事情。堆积我们的现实代码就行。
程序员，文笔一般希望您能看懂。

jquery.fn.tooltip = function() {
this.unbind().hover(
function(e) {
this.t = this.title;
this.title = '';
$('body').append( '<p id="p_tooltip" style="display:none; max-width:320px;text-align:left;"><img id="img_tooltip_arrow" src="images/arrow.gif" />' + this.t + '</p>' );
var tip = $('p#p_tooltip').css教程({ "position": "absolute", "padding": "10px 5px 5px 10px", "left": "5px", "font-size": "14px", "background-color": "white", "border": "1px solid #a6c9e2","line-height":"160%", "-moz-border-radius": "5px", "-webkit-border-radius": "5px", "z-index": "9999"});
var target = $(this);
var position = target.position();
this.top = (position.top - 8); this.left = (position.left + target.width() + 5);
$('p#p_tooltip #img_tooltip_arrow').css({"position": "absolute", "top": "8px", "left": "-6px" });
tip.css({"top": this.top+"px","left":this.left+"px"});
tip.fadein("slow");
},
function() {
this.title = this.t;
$("p#p_tooltip").fadeout("slow").remove();
}
);
};

使用方法

<script type="text/网页特效">
$(document).ready(function(){
$("#tootlsmain img[title]").tooltip();
});
</script>

看一款实例

<html>
<head>
<meta charset="utf-8">
<title>tooltip example</title>
  <style type="text/css">
   body {font-size: 85%; font-family: helvetica, verdana, arial, sans-serif;}
 h1 {font-size: 1.3em;}
 h2 {font-size: 1.2em;}
 table { width: 70%; border-collaps教程e: collapse;}
 th {text-align: left;}
 code {font-size: 1.1em;}
 td { border: 1px solid #ccc; border-width: 1px 0; padding: 3px 6px;}
 
 #livetip {
   position: absolute;
   background-color: #cfc;
   padding: 4px;
   border: 2px solid #9c9;
   border-radius: 4px;
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
 }

  </style>
   
</script>
</head>
<body>
  <h1>event delegation tooltip, with dry script!</h1>
<table id="mytable">
  <thead>
    <tr>
      <th>row number</th>
      <th>link with tooltip</th>
    </tr>
  </thead>
  <tbody>
    <tr id="row1"><td>row 1</td><td><a title="this is a link to row 2000" href="#row2000"><strong>row 2000</strong></a></td></tr>
    <tr id="row2"><td>row 2</td><td><a title="this is a link to row 1999" href="#row1999">row 1999</a></td></tr>
    <tr id="row3"><td>row 3</td><td><a title="this is a link to row 1998" href="#row1998">row 1998</a></td></tr>
    <tr id="row4"><td>row 4</td><td><a title="this is a link to row 1997" href="#row1997">row 1997</a></td></tr>
    <tr id="row5"><td>row 5</td><td><a title="this is a link to row 1996" href="#row1996">row 1996</a></td></tr>
    <tr id="row6"><td>row 6</td><td><a title="this is a link to row 1995" href="#row1995">row 1995</a></td></tr>
  </tbody>
</table>
<script type="text/javascript" src="/ajaxjs/jquery1.3.2.js"></script>
<script type="text/javascript">
jquery(function($) {
 var $livetip = $('<div id="livetip"></div>').hide().appendto('body');
 var tiptitle = '';
 
 $('#mytable').bind('mouseo教程ver mouseout mousemove', function(event) {
   var $link = $(event.target).closest('a');
   if (!$link.length) { return; }
   var link = $link[0];
 
   if (event.type == 'mouseover' || event.type == 'mousemove') {
  $livetip.css({
    top: event.pagey + 12,
    left: event.pagex + 12
  });
   };
 
   if (event.type == 'mouseover') {
  tiptitle = link.title;
  link.title = '';
  $livetip.html('<div>' + tiptitle + '</div><div>' + link.href + '</div>')
   .show();
   };
 
   if (event.type == 'mouseout') {
  $livetip.hide();
  if (tiptitle) {
   link.title = tiptitle;
  };
   };
 });
});
</script>
</body>
</html>