如何使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>

​

另一种选择是使用固定位置但是，而不更改上/左/右/底部属性以保持工具提示相对于其初始位置。相反，用一些负值来调整位置。

如果页面中有滚动，此解决方案将无法工作，因此它不是一般的解决方案。因为是一个位置为: fixed；的元素，它相对于视图端口定位，这意味着即使页面被滚动，它也始终停留在相同的位置。

​

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>

​

一些有用的链接，以了解转换对固定位置的影响：

?

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