Html 如何确定滚动中工具提示的位置<；部门>；？

我在表格中数据列上的工具提示定位方面遇到了一些问题，表格本身位于垂直滚动分区中。给你一点背景

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

添加工具提示时，它看起来是从表格顶部到悬停单元格的距离，并从父div顶部绘制该距离的工具提示。这意味着，在向下滚动div时，工具提示最终会绘制在div底部下方

我创建了一个JSFIDLE，它演示了以下内容：

以下是我的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>

序列号
31199858152063119985815206
56658114865865665811486586
...

我在同一个页面中使用jQuery处理其他事情，但到目前为止还没有找到解决方案。如果您认为解决这个问题的最好方法是使用JS或jQuery，那么我希望看到结果

---

提前感谢

更改HTML标记以更好地控制溢出：

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

和新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;
}

---

.

最后一行的工具提示由滚动控件的边缘剪切。

.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;
}