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部分

//添加支持，如为某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部分