javascript - CSS，工具提示 : Having a auto-resize background according to tooltip text

Question

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

当前:

预期

我应该更改 display 属性吗？我尝试更改为 flex、inline、inline-flex 等。但没有奏效。甚至尝试使用 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 或 span 宽度的限制。您可以添加 min-width，但如果文本不够长，这可能会留下很多空白。

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