jQuery简单实现title提示效果示例

本文实例讲述了jQuery简单实现title提示效果的方法。分享给大家供大家参考，具体如下：

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("" + tipTitle + "");
 $("#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");
      });
    }
  });
};

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery常用插件及用法总结》、《jQuery form操作技巧汇总》、《jQuery操作json数据技巧汇总》、《jQuery扩展技巧总结》、《jQuery拖拽特效与技巧总结》、《jQuery表格(table)操作技巧汇总》、《jquery中Ajax用法总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。