基于prototype和scriptaculous的。刚刚接触这方面,充满了各种各样的疑惑。。
var Toolkit = Class.create({
initialize: function(element, options) {
this.element = $(element);
this.isInitialized = false;
this.setOptions(options);


this.showEvent = this.show.bindAsEventListener(this);
this.hideEvent = this.hide.bindAsEventListener(this);
this.updateEvent = this.update.bindAsEventListener(this);
Event.observe(this.element, 'mouseover', this.showEvent);
Event.observe(this.element, 'mouseout', this.hideEvent);


this.content = this.element.title;
this.element.title = '';


this.element.descendants().invoke(function(el) {
if(Element.readAttribute(el, 'alt')) el.alt = '';
});
},

setOptions: function(options) {
this.options = {
backgroundColor: '#999', //默认背景颜色
borderColor: '#666', //默认边框颜色
textColor: '', //默认字体颜色(使用CSS值)
maxWidth: 250, //默认提示框宽度
align: 'left', //默认对齐方式
delay: 0.5, //默认延迟时间,单位秒
mouseFollow: false, //提示框是否跟着鼠标移动,默认不伴随
opacity: 0.75, //默认透明度
appearDuration: 0.5, //默认持续显示时间,单位秒
disappearDuration: 0.25 //默认提示框消失时间,单位秒
};
Object.extend(this.options, options || {});
},

show: function(e) {
this.xCord = Event.pointerX(e);
this.yCord = Event.pointerY(e);
if(!isInitialized)
this.timeout = window.setTimeout(this.appear.bind(this), this.options.delay * 1000);
},

hide: function(e) {
if(isInitialized)
{
this.appearingFX.cancel();
if(this.options.mouseFollow)
Event.stopObserving(this.element, 'mousemove', this.updateEvent);
new Effect.Fade(this.toolkit, { duration: this.options.disappearDuration, afterFinish: function() { Element.remove(this.toolkit); }.bind(this) });
}
this._clearTimeout(this.timeout);
this.isInitialized = false;
},

_clearTimeout: function(timer) {
window.clearTimeout(timer);
window.clearInterval(timer);
return null;
},

update: function(e) {
this.xCord = Event.pointerX(e);
this.yCord = Event.pointerY(e);
this.setup();
},

setup: function() {
//如果内容的width值大于options属性中maxWidth的值,将width值置成maxWidth值
if(this.options.width > this.options.maxWidth)
{
this.options.width = this.options.maxWidth;
this.toolkit.style.width = this.options.width + 'px';
}
//如果提示框宽度和文档视图的宽度不和谐
if(this.xCord + this.options.width >= Element.getWidth(document.body))
{
this.options.align = 'right';
this.xCord = this.xCord - this.options.width + 20;
}
this.toolkit.style.left = this.xCord - 7 + 'px';
this.toolkit.style.top = this.yCord + 12 + 'px';
},

appear: function() {
this.toolkit = Builder.node('div', { className: 'toolkit',style: 'display:none;' },
[ Builder.node('div', { className: 'xtop' },
[Builder.node('div', { className:'xb1', style:'background-color:' + this.options.borderColor + ';' }),
 Builder.node('div', { className:'xb2', style:'background-color:' + this.options.backgroundColor + '; border-color:' + this.options.borderColor + ';' }),
 Builder.node('div', { className:'xb3', style:'background-color:' + this.options.backgroundColor + '; border-color:' + this.options.borderColor + ';' }),
 Builder.node('div', { className:'xb4', style:'background-color:' + this.options.backgroundColor + '; border-color:' + this.options.borderColor + ';' })
]),
  Builder.node('div', { className: 'xboxcontent', style:'background-color:' + this.options.backgroundColor + 
  '; border-color:' + this.options.borderColor + 
  ((this.options.textColor != '') ? "; color:" + this.options.textColor : "") + ';' }, this.content),
  Builder.node('div', { className: 'xbottom' }, 
[Builder.node('div', { className:'xb4', style:'background-color:' + this.options.borderColor + ';' }),
 Builder.node('div', { className:'xb3', style:'background-color:' + this.options.backgroundColor + '; border-color:' + this.options.borderColor + ';' }),
 Builder.node('div', { className:'xb2', style:'background-color:' + this.options.backgroundColor + '; border-color:' + this.options.borderColor + ';' }),
 Builder.node('div', { className:'xb1', style:'background-color:' + this.options.backgroundColor + '; border-color:' + this.options.borderColor + ';' })
]),
]);
Element.insert(this.toolkit, { before: document.body.childNodes[0] });
Element.extend(this.toolkit);
this.options.width = this.toolkit.getWidth();
this.toolkit.style.width = this.options.width + 'px';
this.setup();
if(this.options.mouseFollow)
Event.observe(this.element, 'mousemove', this.updateEvent);
this.isInitialized = true;
this.appearingFX = new Effect.Appear(this.toolkit, { duration: this.options.appearDuration, to: this.options.opacity });
}
});