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])