html添加tooltip

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

/*
    2007-01-30 lisq custom tooltip
    use age:
    
    
    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])

第二种方法：
JavaScript部分tooltip.js

//添加支持，如为某DIV则仅为该DIV中带有TOOLTIP属性的元素提供支持。
function addTipSupport(e) {
 e.onmouseover = showTip;
 e.onmouseout = hideTip;
 e.onmousemove = showTip;
}
//获得控件的绝对位置，返回左上角坐标
function getElePos(e){
 var t=e.offsetTop;
 var l=e.offsetLeft;
 while(e=e.offsetParent){
 t+=e.offsetTop;
 l+=e.offsetLeft;
 }
 
 return [l, t];
}
//显示TOOLTIP
function showTip() {
 getElePos(event.srcElement);
 if(event.srcElement.tooltip && event.srcElement.tooltip!='') {
 altlayer.style.visibility='visible';
 var cord = getElePos(event.srcElement);
 altlayer.style.left=cord[0]+event.offsetX + 20; //据左显示的位置
 altlayer.style.top=cord[1]+event.offsetY+25;  //据上显示的位置
 altlayer.innerHTML=event.srcElement.tooltip;
 altlayer.style.zIndex = event.srcElement.style.zIndex + 1;
 }
 //else altlayer.style.visibility='hidden';
}
//隐藏TOOLTIP
function hideTip() {
 altlayer.style.visibility = 'hidden';
}
//设置显示区域
addTipSupport(document.body); //此处的参数可换成其它，以局限在某容器内支持TOOLTIP风格。
//////////Tooltip结束//////////

 

 

html部分