[Web前端应用]-- 在页面中创建浮动提示栏，为某些内容加上补充提示【难度 ★★】...

在页面上显示数据表格的时候，对于有一些栏目的field（例如状态），可能总是需要加一些提示信息，加以补充或解释，例如错误提示信息。这个时候可以使用HTML结合Javascript创建包含文本的浮动提示栏。有点类似图片image的alt属性。

（1）首先，创建一个浮动提示框DIV：
<div id="errInfoDiv">
</div>


（2）为该DIV加入CSS
#errInfoDiv{
display:none;
position:absolute;
background-color:#FFFFE6;border: 1px solid #888888;
padding:3px
}


（3）创建显示/隐藏浮动框的JavaScript方法：
//显示浮动框
function showInform(objId, content){
var event =event||window.event;
var divObj = document.getElementById(objId)
var x=event.clientX;
var y=event.clientY;

divObj.style.display='block';
divObj.style.float = "float";
divObj.style.left = x + "px";
divObj.style.top = y + "px";
divObj.innerHTML = content;

}
//隐藏浮动框
function hiddenInform(objId){
var event =event||window.event;
var informDiv = document.getElementById(objId);
var x=event.clientX;
var y=event.clientY;
var divx1 = informDiv.offsetLeft;
var divy1 = informDiv.offsetTop;
var divx2 = informDiv.offsetLeft + informDiv.offsetWidth;
var divy2 = informDiv.offsetTop + informDiv.offsetHeight;
if( x < divx1 || x > divx2 || y < divy1 || y > divy2){
document.getElementById(objId).style.display='none';
}

}


（4）在需要使用的元素上使用onmouseover，onmouseout把显示/隐藏浮动框的功能加上，例如，为表格的某个td上，加上浮动框，参考代码如下：

<td οnmοuseοver='showInform("errInfoDiv", "某错误提示：XXXXX")' οnmοuseοut='hiddenInform("errInfoDiv")'> ERROR </td>