纯CSS工具提示：内容被截断

Question

我正在尝试在我的论坛（消息内部）上添加工具提示。它适用于短工具提示：

但对于长工具提示，我得到了这个：

文本被截断了。将[data-tooltip]的位置属性从relative更改为absolute（见下面的代码）可以解决问题，但会使文本重叠：

我正在使用以下代码：

div.bb-tooltip {
  display: inline-block;
  border-bottom: 1px dotted black; 
}

[data-tooltip] {
  position: relative;
}

[data-tooltip]:before,
[data-tooltip]:after {
  display: none;
  position: absolute;
  top: 0;
}

[data-tooltip]:before {
  border-bottom: .6em solid black;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  content: "";
  left: 20px;
  margin-top: 1em;
}

[data-tooltip]:after {
  background-color: black;
  border: 4px solid #010101;
  border-radius: 7px;
  color: #ffffff;
  content: attr(data-tooltip-message);
  left: 0;
  margin-top: 1.5em;
  padding: 5px 15px;
  white-space: pre-wrap;
  max-width: 350px;
}

[data-tooltip]:hover:after,
[data-tooltip]:hover:before {
  display: block;
}

消息的HTML：

very very <div class="bb-tooltip" data-tooltip data-tooltip-message="this is a long text! the quick brown fox jumps over a lazy dog! lorem ipsum dolor sit amet. Very very long text!">looooooooonnnnnnngggggg</div> tooltip! text text text

(代码取自并改编自：https://codepen.io/trezy/pen/Khnzy)

添加高数值的z-index属性不能解决这个问题。如何解决这个问题？

另一个问题是：对于短文本（见第一张图片），我希望只有在长度过长时才换行，而不是每个单词都换行。

实时示例：https://www.inforge.net/xi/threads/tooltip-test.450399/

- SpeedJack

---

请发布一个最小化的工作代码片段，以便我们可以重现问题，因为上述代码按原样工作。 - Asons

我无法获取一个能够重现问题的代码片段：整个HTML页面非常复杂，我不知道问题出在哪里。仅提取HTML页面的一部分并不能重现问题。 但是我可以链接到我用于测试的网站页面（第二条消息显示了问题）：https://www.inforge.net/xi/threads/tooltip-test.450399/ - SpeedJack

Answer 1

问题出在你的CSS规则中，即 .message .messageContent 和 .messageInfo 含有 overflow: hidden，这会截断太高的工具提示。

将两者都改为 overflow: visible（或完全删除它们）即可解决问题。

更新:

关于每个单词换行的文本，更新此CSS规则 [data-tooltip]:after{min-width: 100px;background-color:black;...，添加一个min-width似乎可以解决这个问题。

- Asons

---

@SpeedJack 尝试给工具提示添加 min-width。 - Asons

@SpeedJack 我更新了我的答案，提供了一个可能的单词换行解决方案。 - Asons

如果您右键单击一个具有奇怪行为的元素并选择“检查”，大多数浏览器都会弹出一个工具，显示该元素的当前样式和标记，这使得很容易看到发生了什么（并且可以即时更改以查看发生了什么）。 - Asons