jQuery 快速title提示器

Posted by Mars . Modified at

// By MarsYao 20161225
// jQuery 快速title提示器
// 用法: 
// 文字:提示内容加在title属性里, 需要快速提示的元素加class="tooltip"
// 图片:用一a元素包裹img元素,img中链接缩略图,a元素href链接大图。tooltip class给a元素即可.
$(function(){

$(".tooltip")
.mouseover(function(e) {
  this.myTitle = this.title;  //用myTitle 替代原来的 title , 防止原提示干扰。
  this.title = "";
  var x = 10 , y = 20;        //防止遮盖原内容设置的偏移量

//用于文字提示器
// var tooltip = "<div id='tooltip'>" + this.myTitle + "</div>"; 

//用于图片放大提示器
  var tooltip = "<div id='tooltip'>" 
    + "<img src='" + this.href+ "'>" 
    +"<div>" + this.myTitle + "</div>"
     + "</div>"; 

  $("body").append(tooltip);
  $("#tooltip")
      .css({                          // toolbar CSS 样式
        "position": "absolute",
        "border-style":"solid",
        "border-width":"2px",
        "top" : ( e.pageY + y ) + "px",
        "left": ( e.pageX + x ) + "px",
            "text-align":"center",
            "background-color":""
  }).show("fast");
})
.mouseout(function(){
  this.title = this.myTitle;
  $("#tooltip").remove();
})
.mousemove(function(e) {               //跟随鼠标移动的Toolbar.
var x = 10 , y = 20;
$("#tooltip")
      .css({
        "position": "absolute",
        "border-style":"solid",
        "border-width":"2px",
        "top" : ( e.pageY + y ) + "px",
        "left": ( e.pageX + x ) + "px"
  });     
});
});
Keywords: jQuery
previousPost nextPost
已经有 1000000 个小伙伴看完了这篇推文。