学步园

 <ul id="="ul_title">
     <li><a class="tooltip" href="#" title="这个是我的超链接提示1.">提示1.</a></li>
     <li><a class="tooltip" href="#" title="这个是我的超链接提示2.">提示2.</a></li>
     <li><a href="#" title="自带提示1.">提示1.</a></li>
     <li><a href="#" title="自带提示2.">提示2.</a></li>
    </ul>

    <script type="text/javascript">
  $(function(){
   var x = 0;
   var y = 20;
   $("a.tooltip").mouseover(function(e){
     //显示
     this.myTitle = this.title;
     this.title = "";
     var tooltip = "<div id='tooltip' style='position:absolute;background:#ccc;'>"+this.myTitle+"</div>";
     $("body").append(tooltip);
     $("#tooltip").css({
      "top": (e.pageY+y) + "px",
      "left": (e.pageX+x) + "px"}).css("opacity","70").show("fast");
    }).mouseout(function(){
     //隐藏
     $("#tooltip").remove();
     this.title = this.myTitle;
    }).mousemove(function(e){
     //移动
     $("#tooltip").css({
      "top": (e.pageY+y) + "px",
      "left": (e.pageX+x) + "px"
      });
     });
  });
    </script>

    <style type="text/css">
     #ul_title{list-style:none;}
    </style>