在固定 table header 上显示工具提示

Question

我正在尝试让工具提示覆盖在 jquery 数据 table 中，并固定滚动 header。我在这里的 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>

基本上 datatables 将以下 css 强制到容器中：

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

这对于使其中出现的内容有意义scroll-able。

但是，我从另一个站点

上截取了一个非常简单的 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] 声明中，它会将文本移动到 table.[=20 内的奇怪位置=]

那么，有什么方法可以让这个工具提示显示在容器之外而不用添加 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;
}

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

在固定 table header 上显示工具提示

Display tooltip over fixed table header

html

css

jquery-datatables