html - 如何在滚动的 中固定工具提示的位置？

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 标记以更好地控制溢出:

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

在你的 CSS 中，从 td 中移除 overflow:

.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 Demo .