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