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

【问题标题】：How can I fix the position of tooltips within a scrolling <div>?如何修复滚动 <div> 中工具提示的位置？
【发布时间】：2014-09-23 19:19:24
【问题描述】：

我在将工具提示定位在表格中的一列数据上时遇到了一些问题，该表格本身位于垂直滚动的 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，我很乐意看到结果！

提前致谢

【问题讨论】：

标签： html css

【解决方案1】：

更改您的 HTML 标记以更好地控制overflow：

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

【讨论】：

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