如何使 HTML 工具提示在溢出中完全可见：隐藏的父级？

Question

我正在尝试为我的应用程序制作一个工具提示，以便当我将鼠标悬停在某些文字上时，会出现一个弹出窗口。悬停在上面的文字不是完全可见的（即它在一个带有溢出的表格单元格中：隐藏所以单词被切断了）。将鼠标悬停在工具提示上时，我想在工具提示中显示完整的文字。我希望工具提示完全可见，不受溢出影响：表格单元格的隐藏。这是我目前所拥有的：

CSS：

.tooltip {
    position: relative;
}

.tooltip:hover:after {
    background: rgba(0,0,0,.8);
    color: #fff;
    top: -30px;
    left: 10px;
    border-radius: 15px;
    content: attr(alt);
    padding: 5px 15px;
    position: absolute;
}

HTML：

<table>
    <tr>
        <td style="overflow:hidden">
            <span alt="reallyLongFullWriting" class="tooltip">partiallyHiddenWriting</span>
        </td>
        <td></td>
    </tr>
</table>

它是这样工作的，但是当它溢出时工具提示也会被隐藏。请帮我弄清楚如何使工具提示完全可见而不是部分隐藏。谢谢。

编辑： 这是似乎正在发生的事情的照片：

Answer 1

如果您要保持相同的结构，则无法使用overflow:hidden 使元素可见。

解决方案是在td 元素上指定高度/宽度，以便为:after 元素创建必要的空间。

table {
  margin: 50px;
}

.tooltip {
  position: relative;
}

td {
  height: 80px;
  overflow: hidden;
  border:1px solid;
}

.tooltip:hover:after {
  background: rgba(0, 0, 0, .8);
  color: #fff;
  top: -30px;
  left: 10px;
  border-radius: 15px;
  content: attr(alt);
  padding: 5px 15px;
  position: absolute;
}

<table>
  <tr>
    <td>
      <span alt="fullWriting" class="tooltip">partiallyHiddenWriting</span>
    </td>
  </tr>
</table>

另一种选择是使用固定位置 BUT 而不更改 top/left/right/bottom 属性以保持工具提示相对于其初始位置。而是用一些负边距调整位置。

如果您在页面中滚动，此解决方案将不起作用，因此它不是通用解决方案。因为 元素的位置：固定；相对于视口定位，这意味着即使页面滚动，它也始终保持在同一位置。

table {
  margin: 50px;
}

.tooltip {
  position: relative;
}

td {
  overflow: hidden;
  border:1px solid;
}

.tooltip:hover:after {
  background: rgba(0, 0, 0, .8);
  color: #fff;
  margin-top:-30px;
  border-radius: 15px;
  content: attr(alt);
  padding: 5px 15px;
  position: fixed;
  z-index:999;
}

<table>
  <tr>
    <td>
      <span alt="fullWriting" class="tooltip">partiallyHiddenWriting</span>
    </td>
  </tr>
</table>

仍然能够在可滚动页面上使用固定位置的解决方法是应用对父元素没有影响的变换：

body {
 min-height:120vh;
}

table {
  margin: 50px;
  transform:translate(0,0);
}

.tooltip {
  position: relative;
}

td {
  overflow: hidden;
  border:1px solid;
}

.tooltip:hover:after {
  background: rgba(0, 0, 0, .8);
  color: #fff;
  margin-top:-30px;
  border-radius: 15px;
  content: attr(alt);
  padding: 5px 15px;
  position: fixed;
  z-index:999;
}

<table>
  <tr>
    <td>
      <span alt="fullWriting" class="tooltip">partiallyHiddenWriting</span>
    </td>
  </tr>
</table>

---

一些有用的链接来了解变换对固定位置的影响：

Why does `transform` break `position: fixed`?

https://stackoverflow.com/a/37953806/8620333