Tootip小程序，整理一下自己用

需求：给表单每个信息项添加一个帮助信息，当mouseover或focus时激活帮助信息

效果：如下图所示

程序实现：

/*

2007-01-30 lisq custom tooltip

use age:

<script src="/modules/commons/js/prototype.js"></script>

<script src="/modules/commons/js/tooltip.js"></script>

var config = new ToolTip.Config($('A0101'), '人员姓名', 400)

var arrConfig = []

arrConfig.push(config)

var tootip = ToolTip.Init(arrConfig)

*/

Event.observe(window, 'load', function(){

var div = document.createElement('div')

div.id = 'ToolTipID'

var divIntroTopLine = document.createElement('div')

divIntroTopLine.id = 'divIntroTopLine'

div.appendChild(divIntroTopLine)

var divIntroArrow = document.createElement('div')

divIntroArrow.id = 'divIntroArrow'

divIntroTopLine.appendChild(divIntroArrow)

var divIntroContent = document.createElement('div')

divIntroContent.id = 'divIntroContent'

divIntroContent.innerHTML = 'hello world'

div.appendChild(divIntroContent)

ToolTip.Container = div

ToolTip.ContainerContent = divIntroContent

document.body.appendChild(div)

Element.hide(div)

}, false)

var ToolTip = {

Config : function(ele, tip, width){

this.ele = ele

ele.config = this

this.tip = tip

this.width = width

},

Init : function(arrConfig){

for(var i=0; i<arrConfig.length; i++){

var config = arrConfig[i]

if(!config || !config.ele || !config.tip)

continue

config.ele.tip = config.tip

config.ele.onmouseover = ToolTip.MouseOver

config.ele.onmouseout = ToolTip.MouseOut

config.ele.onfocus = ToolTip.MouseOver

config.ele.onblur = ToolTip.MouseOut

}

},

MouseOver : function(){

ToolTip.Container.style.width = this.config.width

ToolTip.ContainerContent.innerHTML = this.tip

var arr = Position.positionedOffset(this)

eToolTip = $('ToolTipID')

eToolTip.style.left = arr[0] - 50

eToolTip.style.top = arr[1] + 21

Element.show(eToolTip)

},

MouseOut : function(){

eToolTip = $('ToolTipID')

Element.hide(eToolTip)

}

}

调用：

var config = new ToolTip.Config(fieldInput, field.HelpInfo, 150)

ToolTip.Init([config])