Question

我正在尝试使用固定滚动标题在jquery数据表中覆盖工具提示。我在这里用jsfiddle重现了这个问题：

示例html：

<section>
    <h2>I am content</h2>
</section>
<section class="content">
        <div><span data-tooltip="other text i want to see">Other text</span></div>
        <div><span data-tooltip="some text i want to see">Text</span></div>
</section>

基本上，数据表正在强制将以下css放到容器上：

section.content {
    position: relative;
    background-color: white;
    width: 90%; 
    overflow: auto;
    border: 1px solid gray;
    height: 125px;
}

这有助于使其中显示的内容可滚动。

但是，我从另一个网站上扯了一个非常简单的css工具提示

[data-tooltip] {
    position: relative;
    z-index: 10;
    cursor: help;
    color: orangered;
    text-decoration: none;
}
[data-tooltip]:before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-top: 20px solid orangered;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    left: 0;
    bottom: 90%;
    display: none;
}

[data-tooltip]:after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 130%;
    right: -50%;
    background: orangered;
    padding: 5px 15px;
    color: black;
    border-radius: 10px;
    white-space: nowrap;
    display: none;
}

[data-tooltip]:hover:after {
    bottom: 100%;
}

[data-tooltip]:hover:before {
    bottom: 70%;
}

[data-tooltip]:hover:after, [data-tooltip]:hover:before {
    display:block;
}

但到目前为止，没有任何修补它的css产生任何令人满意的结果。添加较高的z-index并不会做任何事情，如果我将position: absolute添加到[data-tooltip]声明中，则会将文本移动到表格内的奇怪位置。

那么，有没有办法让这个工具提示出现在容器之外而不向其添加position: absolute？

Answer 1

将此添加到容器

overflow: visible;

check this fiddle

Answer 2

经过一番考虑，我们在CSS文件中添加了一些额外的覆盖规则：

table tr:first-child [data-tooltip]:hover:after {
    bottom: -60%;
    right: 170%;
}
table tr:first-child [data-tooltip]:hover:before {
    bottom: -35%;
    right: 140%;
    border-left: 20px solid orangered;
    border-top: 2px solid transparent;
    border-bottom: 18px solid transparent;
}

当无法在顶部显示时，这会将工具提示放在内容的左侧。

在固定表头上显示工具提示

2 个答案: