工具提示隐藏在带有固定标题的表格中

Question

我有一个带有固定标题的表格，工具提示在悬停时被相邻单元格隐藏。

https://jsfiddle.net/9uep5na8/

table {

    border-collapse: collapse;

    width: 100%;

    position: relative;

}

td, th {

    height: 200px;

    border: 1px solid black;

}

th {

    position: sticky;

    top: 0;

    background: #eee;

}

button:hover::after {

    content: "some tooltip content";

    position: absolute;

    bottom: 50%;

    left: 250px;

    background-color: yellow;

    padding: 10px 8px;

    min-width: 240px;

}

Answer 1

我相信唯一的方法是使用 javaScript。这是我的实现：CSS：#tooltip::after {  content: "some tooltip content some tooltip content some tooltip content some tooltip content";  position: absolute;  bottom: 30%;  left: 250px;  background-color: yellow;  padding: 10px 8px;  min-width: 240px;  max-width: 240px;} JS：btn.addEventListener('mouseover', event => {    tooltip.style.display = 'block';})btn.addEventListener('mouseout', event => {    tooltip.style.display = 'none';})https://jsfiddle.net/1dvc6mbh/

Answer 2

<th>解决方案是为具有工具提示的内容设置更高的 z-indexth.tooltip-header&nbsp;{ &nbsp;&nbsp;z-index:&nbsp;20; }修改了您的示例： https:&nbsp;//jsfiddle.net/0cwahnby/2/

Answer 3

尝试删除position: absolute;工具提示上的 。