<div id="newtitle">
  <h2>美化Title</h2>
  <ul>
    <li><a href="#" title="这是Title1">Title1</a></li>
    <li><a href="#" title="这是Title2">Title2</a></li>
    <li><a href="#" title="这是Title3">Title3</a></li>
    <li><a href="#" title="这是Title4">Title4</a></li>
    <li><a href="#" title="这是Title5">Title5</a></li>
    <li><a href="#" title="这是Title6">Title6</a></li>
    <li><a href="#" title="这是Title7">Title7</a></li>
    <li><a href="#" title="这是Title8">Title8</a></li>
  </ul>
</div>

$(function(){
  //为提示框预设一定的top和left值，以免提示框与超链接的距离太近
  var x = 15;
  var y = 15;
  $("#newtitle a").mouseenter(function(e){
      //记录title，以便下面清空title后能重新获取title的值
      this.myTitle = this.title; 
      this.title = "";
      var beatitle = "<div id='beatitle'>"+this.myTitle+"</div>";
      $("#newtitle").append(beatitle);
      $("#beatitle")
        .css({
          "opacity":"0.6",
          "top": (e.pageY+y) + "px",
          "left": (e.pageX+x) + "px"
          }).show("fast");
  }).mouseleave(function(){
      this.title = this.myTitle;
      $("#beatitle").remove();
  });
})

$(function(){
  var x = 15;
  var y = 15;
  //为提示框预设一定的top和left值，以免提示框与超链接的距离太近
  $("#newtitle a").mouseenter(function(e){
      //记录title，以便下面清空title后能重新获取title的值
      this.myTitle = this.title;
      this.myHref = this.href;
      this.myHref = (this.myHref.length > 30 ? this.myHref.toString().substring(0,30)+"..." : this.myHref);
      this.title = "";
      var beatitle = "<div id='beatitle'>"+this.myTitle+"<span>"+this.myHref+"</span>"+"</div>";
      $("#newtitle").append(beatitle);
      $("#beatitle")
        .css({
          "opacity":"0.6",
          "top": (e.pageY+y) + "px",
          "left": (e.pageX+x) + "px"
          }).show("fast");
  }).mouseleave(function(){
      this.title = this.myTitle;
      $("#beatitle").remove();
  }).mousemove(function(e){
      $("#beatitle")
        .css({
          "top": (e.pageY+y)+"px",
          "left": (e.pageX+x)+"px"
        });
  });
})

body {font-size: 12pt; color: #99CC33; }
h2 {font-size: 14pt; }
ul {list-style: none; padding: 0 0 0 10px;}
ul li {margin-bottom: 5px; }
a {text-decoration: none; color: #99CC33; }
#beatitle {position: absolute; z-index: 1000; max-width: 260px; width: auto !important; width: 220px; background: #000; text-align: left; padding: 5px; min-height: 1em; }
#beatitle span {display: block; color: #FF9900; }

/*
调用示例：
$(document).ready(function(){
$('.quicktip').quberTip({
 speed:200
});
});
<a href='' class='quicktip' title='Information about this link'>desktop publishing</a>
*/
jQuery.fn.quberTip = function (options) {
  var defaults = {
    speed: 500,
    xOffset: 10,
    yOffset: 10
  };
  var options = $.extend(defaults, options);
  return this.each(function () {
    var $this = jQuery(this);
    if ($this.attr('title') != undefined) {
      //Pass the title to a variable and then remove it from DOM
      if ($this.attr('title') != '') {
        var tipTitle = ($this.attr('title'));
      } else {
        var tipTitle = 'QuberTip';
      }
      //Remove title attribute
      $this.removeAttr('title');
      $(this).hover(function (e) {
        //      $(this).css('cursor', 'pointer');
        $("body").append("<div id='tooltip'>" + tipTitle + "</div>");
        $("#tooltip").css({ "position": "absolute",
          "z-index": "9999",
          "background": "#D3DDF5",
          "background-image": "url(../../Quber_Image/Quber_Common/Quber_TB_TitltBG.png)",
          "padding": "5px",
          "opacity": "0.9",
          "border": "1px solid #A3C0E8",
          "-moz-border-radius": "3px",
          "border-radius": "3px",
          "-webkit-border-radius": "3px",
          "font-weight": "normal",
          "font-size": "12px",
          "display": "none"
        });
        $("#tooltip")
.css("top", (e.pageY + defaults.xOffset) + "px")
      .css("left", (e.pageX + defaults.yOffset) + "px")
      .fadeIn(options.speed);
      }, function () {
        //Remove the tooltip from the DOM
        $("#tooltip").remove();
      });
      $(this).mousemove(function (e) {
        $("#tooltip")
  .css("top", (e.pageY + defaults.xOffset) + "px")
  .css("left", (e.pageX + defaults.yOffset) + "px");
      });
    }
  });
};