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元素创建必要的空间。

＆＃13;

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;
}

＆＃13;

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

＆＃13;

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

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

＆＃13;

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;
}

＆＃13;

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

＆＃13;

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

＆＃13;

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;
}

＆＃13;

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

＆＃13;

一些有用的链接，用于理解变换对固定位置的影响：

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

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

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

1 个答案: