弹出详细信息提示窗口

项目中客户对表格中信息多的地方提出需要用.....代替现实的内容 当鼠标移动到那个区域弹出小窗口提示详细信息 这样表格显示的时候就显得整齐好看了
<td onMouseOver="showInfoDiv()" onMouseOut="hiddenInfoDiv()">
    <span id="WFNNAMES" name="WFNNAMES">
       <xsl:value-of select="WFNNAMES"/>
    </span>
    <input type="hidden" name="WFNNAME">
       <xsl:attribute name="value">
       <xsl:value-of select="WFNNAME"/>
       </xsl:attribute>
    </input>
</td>
......


......
var jddivs = null;
function ceateInfoDiv(id) {
    if (jddivs == null) {
        var div = document.createElement("div");
        div.id = id;
        div.style.position = "absolute";

        jddivs = div;
    }
    return jddivs;
}

function showInfoDiv() {
    var curEmt = event.srcElement;
    var curTR = findParentEmt(curEmt, "TR");
    var rowno = curTR.rowIndex;
    var wfnnames = exratelist.rows[rowno].all("WFNNAME").value;

    var id="infoDiv";
    var div=ceateInfoDiv(id);
    if (wfnnames != "完成" && wfnnames.indexOf("|") >= 0) {
        div.innerHTML = "<table><tr class='report_fonts'><td>" + wfnnames + "</td></tr></table>";
        div.style.display = "block";
        div.style.backgroundColor = "#BCD8ED";        
        div.style.left = event.clientX + document.body.scrollLeft + "px";
        div.style.top = event.clientY + document.body.scrollTop + "px";
        document.body.appendChild(div);
    }

}

hiddenInfoDiv = function() {
    var id="infoDiv";
        document.getElementById(id).style.display="none";
}
.....
从代码可以很直接的看出是通过鼠标移动触发 然后生成一个div 在生成的div中展示数据 这其中容易出现的问题是显示的时候div和鼠标的位置隔很远 不在所期待的位置 这个是由于包含这个div的窗口有滚动条导致 所以在div的显示位置要absolute 要加上窗口滚动条的位置
另外一个注意的地方就是对div中的内容进行样式的控制 可事先写好需要的样式 然后直接div.innerHTML = "<table><tr class='report_fonts'><td>" + wfnnames + "</td></tr></table>";把样式写进去即可 方便快捷