用JavaScript实现类似于ToolTip的悬浮框

        在使用ASP.NET的时候，有时候需要鼠标悬停在页面的某各位置的时候，或者说悬停在某个控件上的时候需要

出现一个悬浮框。这个悬浮框可以是对此控件内容的详细说明，或者一些其他的信息。比如在页面中可能有一个表

格，表格中的一项叫“考核标准”，那么可能你需要当鼠标移到“考核标准”对应的单元格的时候，需要出现一个

对“考核标准”详细说明的悬浮框。

        你可能马上会想到ToolTip属性，的确ToolTip属性可以实现这种效果，但是ToolTip属性有一个缺点，它的显示

时间有限制。过了一定的时间，ToolTip会自动消失，只有将鼠标重新移到指定的控件上，ToolTip才可以再次显

现。这样如果您说明的内容 比较多的话，显然ToolTip是不能满足您的需求的。

        这里，优快云在结贴打分的时候给了一个很好的解决方案。在结贴给分的时候，当您将您的鼠标移到给分的文

本框的时候，会出现一个小的黄色矩形，里面分别显示了问题的总分和剩余可分配的分数。如果您不将鼠标移开文

本框，那么这个悬浮框将不会消失。这正是我们需要的。

        从对应网页的源代码可以看到上面效果的具体实现，代码摘抄如下，这里主要关注是悬浮框的定位问题，在代

码的注释中都已经体现了。这里需要明确的一个概念是这里需要将和其中的控件就是一个个的容器，大容器中可以

放置小容器，页面最高级别的容器是Document。而TableCell的父容器是Table。想知道一个控件的父容器是什么

可以通过obj.offsetParent.TagName属性来得到：

// onmouseover 事件触发的函数
function  cc(e, message)
... {
       cen.innerText = message;
       var ttop = e.offsetTop;                     //这里得到指定控件离父容器控件顶部的距离 px
       var tleft= e.offsetLeft;                   //这里得到指定控件离父容器控件左边的距离 px
       var h = e.clientHeight;                  //这里得到指定控件的高度
       var w = e.clientWidth;                  //这里得到指定控件的宽度
       var originalE = e;

       //这里通过 e = e.offsetParent 操作，一直将e变成document对象，既最高级别的容器；
       //这里ttop 和 tleft 就得到了指定控件距离网页 顶部 和 左部 的距离；
       while (e = e.offsetParent)...{ttop += e.offsetTop; tleft += e.offsetLeft;}
       cen.style.display = "";  //层显示
       cen.style.top = ttop + h;
       cen.style.left= tleft + w - cen.clientWidth; //上面的代码都是将悬浮层调整到指定控件的正下方
}

// onmouseout 事件触发的函数
function  out() ... {cen.style.display = "none";}

 

           悬浮框是用DIV实现的，对应代码如下，可以根据需要调整大小、背景：

< div  id ="pop"  style ="DISPLAY: none; FONT-SIZE: 13px; Z-INDEX: 99; BACKGROUND: #ffff00; WIDTH: 200px; POSITION: absolute" ></ div >