如何在滚动< div>中固定工具提示的位置? [英] How can I fix the position of tooltips within a scrolling <div>?

问题描述

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

I'm having some trouble with the positioning of tooltips on a column of data within a table, which itself is inside a vertical scrolling div. A little background for you...

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

Due to legacy issues which are beyond my control, the page I am developing has to be displayed through an iframe of fixed width and height. The data I need to display has about 12 columns, all of which are required to be displayed. One column will contain serial numbers, which sometimes end up overflowing the bounds of the cell. I've set the overflow of this column to show an ellipsis, and have added tooltips as described in the accepted answer to this question.

添加工具提示时，似乎要花费从表格顶部到悬停的单元格的距离，并绘制与父div顶部距离的工具提示.这意味着，当您向下滚动div时，工具提示最终会被下拉到div底部下方.

When the tooltips are added, it appears to take the distance from the top of the table to the hovered cell, and draw the tooltip that distance from the top of the parent div. This means that, when you scroll down through the div, the tooltips end up being drawn down below the bottom of the div.

我创建了一个展示此内容的jsFiddle: http://jsfiddle.net/kuzxLwxe/4/

I've created a jsFiddle which demonstrates this: 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，我很乐意看到结果！

I'm using jQuery for other things within the same page, but so far haven't been able to come up with a solution with it. If you think the best way to fix this is by using JS or jQuery I'd love to see the result!

预先感谢

推荐答案

更改HTML标记以对溢出进行更多控制:

Change your HTML markup to take more control on overflow:

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

在您的CSS中，从 td 中删除 overflow :

And in your CSS, remove overflow from 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演示.

这篇关于如何在滚动< div>中固定工具提示的位置?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！