js文本框或者按钮鼠标悬停提示说明文字

html页面中很多元素会用到文本提示，当鼠标悬停之后显示一段说明文字;

/*显示说明性文字*/

function tips(id,str){

    t= getTop(document.getElementById(id))-document.getElementById(id).offsetHeight;

    l=  getLeft(document.getElementById(id));

    document.getElementById("tips").innerHTML="提示："+str;

    document.getElementById("tips").style.left=l+"px";

    document.getElementById("tips").style.top=t+"px";

    document.getElementById("tips").style.display="";

}

/*移除说明性文字*/

function outtips(){

    document.getElementById("tips").style.display='none';

}

//获取元素的纵坐标

    function getTop(e){

        var offset=e.offsetTop;

        if(e.offsetParent!=null) offset+=getTop(e.offsetParent);

        return offset;

    }

//获取元素的横坐标

    function getLeft(e){

        var offset=e.offsetLeft;

        if(e.offsetParent!=null) offset+=getLeft(e.offsetParent);

        return offset;

    }

</script>

<div id="tips" style="position:absolute;border:1px solid #ccc;padding:0px 3px;color:#f00;display:none;height:20px;line-height:20px;background:#fcfcfc">

</div>

<br />

 

在需要提示的元素的onmouseover事件中调用 tips(id,str)提示说明，在onmouseout事件中调用outtips()隐藏说明