html - 如何使 HTML 工具提示在溢出 :hidden parent? 中完全可见

Question

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

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>

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

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

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