纯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/

Answer 1

问题是您的CSS规则.message .messageContent和.messageInfo overflow: hidden会导致工具提示过高。

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

更新

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