[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 onmouseover='showInform("errInfoDiv", "某错误提示：XXXXX")' onmouseout='hiddenInform("errInfoDiv")'> ERROR </td>