JS 工具提示效果(tool tips)

一个非常简单的可自定义的工具提示效果，只有一个可选参数为延迟出现的时间，默认为无延迟。
/******************************
*
* Name: toolTips
* Author: Aken li
* Date: 2008.07.10
* Blog: www.kxbd.com
*
******************************/
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