CSS，工具提示：根据工具提示文本自动调整背景大小

Question

使用这个 codepen，我想显示可以自动调整大小的工具提示。我的意思是，如果有一个很长的文本要显示为tooltip message，tooltip box是否可以调整大小以将消息调整为多行？我知道理想的工具提示最多应该是几句话，但我仍然只是好奇地探索它。

当前：

预计

我应该更改 display 属性吗？我尝试更改为 flex, inline, inline-flex, etc。但是 none 有效。甚至尝试使用 width: auto 但我认为这将需要更多逻辑。

Answer 1

body {
  font-family: sans-serif;
}
[data-title] {
  outline: red dotted 1px; /*optional styling*/
  font-size: 30px; /*optional styling*/
  
  position: relative;
  cursor: help;
}

[data-title]:hover::before {
  content: attr(data-title);
  position: absolute;
  top: calc(100% + 10px);
  display: inline-block;
  padding: 3px 6px;
  border-radius: 2px;
  background: #000;
  color: #fff;
  font-size: 12px;
  font-family: sans-serif;
  word-break: break-word;
  max-width: 150px;
}
[data-title]:hover::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 8px;
  display: inline-block;
  color: #fff;
  border: 8px solid transparent; 
  border-bottom: 8px solid #000;
}

<h1>Styling html title tooltip</h1>
<span data-title="Here is some extra long text that should break the line">Hover me</span>

我把bottom: -26px;改成了top: calc(100% + 10px);。
我删除了 white-space: inherit;.
我添加了 word-break: break-word;.
我添加了 max-width: 150px;。

目前工具提示的宽度受限于 max-width 或跨度的宽度。您可以添加 min-width，但如果文本不够长，可能会留下很多空白 space。

这些更改应该正确定位工具提示和小箭头指针，因此两者都不会重叠。

Answer 2

从不换行改为换行

[data-title]:hover::before {white-space: wrap; }

CSS，工具提示：根据工具提示文本自动调整背景大小

CSS, Tooltip: Having a auto-resize background according to tooltip text

javascript

css

tooltip