如何修复滚动中工具提示的位置<div>？

Question

我在将工具提示定位在表格内的数据列上时遇到一些问题，该表格本身位于垂直滚动 div 内。为您提供一些背景知识...

由于我无法控制的遗留问题，我正在开发的页面必须通过固定宽度和高度的 iframe 来显示。我需要显示的数据大约有12列，需要全部显示。一列将包含序列号，有时最终会溢出单元格的边界。我已设置此列的溢出以显示省略号，并添加了工具提示，如this问题的接受答案中所述。

添加工具提示后，它似乎会获取从表格顶部到悬停单元格的距离，并在距父 div 顶部的距离处绘制工具提示。这意味着，当您向下滚动 div 时，工具提示最终会绘制在 div 底部下方。

我创建了一个 jsFiddle 来演示这一点：http://jsfiddle.net/kuzxLwxe/4/

这是我的CSS：

.ResultsWrapper {
    width:150px;
    height:314px;
    text-align:center;
    overflow-x:hidden;
    overflow-y:scroll;
    border:1px solid black;
}
.ResultsTable {
    width:86px;
    border-collapse:collapse;
    table-layout:fixed;
}
.ResultsTable th, .ResultsTable td {
    border:1px solid black;
    overflow:hidden;
    text-overflow:ellipsis;
}
.ColumnSerialNo {
   width:81px;
}
.hasTooltip span {
    display: none;
    color: #000;
    text-decoration: none;
    padding: 3px;
}
.hasTooltip:hover span {
    display: block;
    position: absolute;
    background-color: #FFF;
    border: 1px solid #CCC;
    margin: 2px 10px;
}

还有我的 html：

<div class="ResultsWrapper">
    <table class="ResultsTable">
        <thead>
            <tr>
                <th class="ColumnSerialNo">Serial Number</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="hasTooltip">3119985815206<span>3119985815206</span></td>
            </tr>
            <tr>
                <td class="hasTooltip">5665811486586<span>5665811486586</span></td>
            </tr>
            ...
        </tbody>
    </table>
</div>

我在同一页面中使用 jQuery 来处理其他事情，但到目前为止还无法找到解决方案。如果您认为解决此问题的最佳方法是使用 JS 或 jQuery，我很乐意看到结果！

提前致谢

Answer 1

更改 HTML 标记以更好地控制

overflow

:

<tr>
    <td class="hasTooltip">
        <div class="SerialNumberContainer">
            <div class="SerialNumber">3119985815206</div>
            <div class="SerialNumberTooltip">3119985815206</div>
        </div>
    </td>
</tr>

在 CSS 中，从

overflow

中删除

td

：

.ResultsTable th, .ResultsTable td {
    border:1px solid black;
    /* overflow: hidden; this line should delete */
    text-overflow:ellipsis;
}

还有新的 CSS：

.SerialNumberContainer {
    position: relative;
    z-index: 10;
}

.SerialNumber {
    width: 80px;
    overflow: hidden;
}

.SerialNumberTooltip {
    position: absolute;
    top: 10px;
    left: 2px;
    background-color: #FFF;
    border: 1px solid #CCC;
    display: none;
}

.SerialNumberContainer:hover {
    z-index: 20;
}

.SerialNumberContainer:hover .SerialNumberTooltip {
    display: block;
}

JSFiddle 演示.

Answer 2

如果 ResultsWrapper 的宽度小于工具提示长度，则不会显示全文。

想知道如何在不增加 ResultsWrapper 的情况下显示完整的工具提示。

.ResultsWrapper {
width:100px;
height:314px;
text-align:center;
overflow-x:hidden;
overflow-y:scroll;
border:1px solid black;
}

JSFiddle 演示