Question

我有一个我正在使用的基本工具提示css类，问题是，工具提示被容器剪切了。具体来说，我使用的是angularJs UI Grid，工具提示项位于单元格中。工具尖端不会在细胞外部绘制。我不知道我需要改变什么，所以这个工具提示将绘制所有内容而不会被剪裁。

如果你去的话，我有一个样本你可以去看看： W3schools sample page

并输入代码：

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <style>
    .con-tooltip {
      position: relative;
    }
    .con-tooltip:hover:before {
      border: 1px solid #fc0;
      padding: 3px 6px;
      background: #fffea1;
      content: attr(data-title);
      font-size: 1.7em;
      position: absolute;
      left: 0px;
      top: -26px;
      z-index: 999999;
      overflow: visible;
    }
  </style>
</head>

<body>
  <p class="con-tooltip" data-title="This is a tooltip">This is a paragraph.</p>
  <p class="con-tooltip" data-title="This is a tooltip">This is a paragraph.</p>

</body>

</html>

＆＃13;

如果您将鼠标悬停在文本的顶行，您将看到工具提示被框剪切，而底部显示完整的工具提示。我需要什么CSS才能使顶部工具提示显示而不剪切？

Answer 1

问题是工具提示的位置绝对位置和高位负值。您可以设置较小的顶部，如：

＆＃13;

.con-tooltip {
  position: relative;
}
.con-tooltip:hover:before {
  border: 1px solid #fc0;
  padding: 3px 6px;
  background: #fffea1;
  content: attr(data-title);
  font-size: 1.7em;
  position: absolute;
  left: 0;
  top: -10px;/*set a smaller value for top*/
  z-index: 999999;
  overflow: visible;
}

＆＃13;

<p class="con-tooltip" data-title="This is a tooltip">This is a paragraph.</p>
<p class="con-tooltip" data-title="This is a tooltip">This is a paragraph.</p>

＆＃13;

发表评论后，我将尝试使用课程white-space: nowrap;中的.con-tooltip来解决您的问题：

＆＃13;

.con-tooltip {
  position: relative;
  white-space: nowrap;
}
.con-tooltip:hover:before {
  border: 1px solid #fc0;
  padding: 3px 6px;
  background: #fffea1;
  content: attr(data-title);
  font-size: 1.7em;
  position: absolute;
  left: 0px;
  top: -10px;
  z-index: 999999;
  overflow: visible;
}

＆＃13;

<table>
  <tr>
    <td>
      <p class="con-tooltip" data-title="This is a tooltip">This is a paragraph.</p>
    </td>
    <td>
      <p class="con-tooltip" data-title="This is a tooltip">This is a paragraph.</p>
    </td>
    <td>
      <p class="con-tooltip" data-title="This is a tooltip">This is a paragraph.</p>
    </td>
  </tr>
  <tr>
    <td>
      <p class="con-tooltip" data-title="This is a tooltip">This is a paragraph.</p>
    </td>
  </tr>
</table>

＆＃13;

如何获取溢出容器的工具提示？

1 个答案: