JS 工具提示效果(tool tips)

一個非常簡單的可自定義的工具提示效果，隻有一個可選參數為延遲出現的時間，預設為無延遲。

var toolTips = Class.create();

toolTips.prototype = {

initialize:function(delayDur){

this.wrapperId = "toolTipsWrapper";

this.show = false;

this.xGap = 10;

this.yGap = 10;

this.opacity = 0.9;

this.delayDur = delayDur || 0;

this.init();

},

init:function() {

this.insertWrapper();

document.observe("mouseover", this.showToolTips.bind(this));

document.observe("mouseout", this.hideToolTips.bind(this));

document.observe("mousemove", this.moveToolTips.bind(this));

},

insertWrapper:function() {

$(document.body).insert(new Element("div",{'id':this.wrapperId,'style':'position: absolute;display: none;width:auto;z-index: 10000;'}));

$(this.wrapperId).setStyle({opacity:this.opacity});

},

showToolTips:function(e) {

var el = e.element();

var o = $(this.wrapperId);

if(el.title){

el.toolTip = el.title;

el.title = "";

};

if(el.toolTip){

o.update(el.toolTip).show.bind(o).delay(this.delayDur);

this.show = true;

}

},

hideToolTips:function(e) {

var el = e.element();

var o = $(this.wrapperId);

o.setStyle({left:"-1000px",display:"none"})

this.show = false;

},

moveToolTips:function(e) {

if(this.show){

var x = e.pointerX();

var y = e.pointerY();

var x1 = this.xGap;

var y1 = this.yGap;

var o = $(this.wrapperId);

var dims = o.getDimensions();

var oW = dims.width;

var oH = dims.height;

var docDims = document.viewport.getDimensions();

var docW = docDims.width;

var docH = docDims.height;

var docScroll = document.viewport.getScrollOffsets();

var docLeft = docScroll.left;

var docTop = docScroll.top;

//var posX=(x+x1+oW-docLeft>docW) ? docW+docLeft-oW : x+x1;

//var posY=(y+y1+oH-docTop>docH) ? docH+docTop-oH : y+y1;

var posX=(x+x1+oW-docLeft>docW) ? x-oW-x1 : x+x1;

var posY=(y+y1+oH-docTop>docH) ? y-oH-y1 : y+y1;

o.setStyle({

left: posX+"px",

top: posY+"px"

})

}

}

};

轉自： http://www.kxbd.com/article.asp?id=218