html鼠标悬停弹出文本框,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;

}

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