CSS，工具提示：根據工具提示文本自動調整背景大小

Question

使用這個codepen ，我想顯示可以自動調整大小的工具提示。 我的意思是，如果有一個長文本顯示為工具提示消息，工具提示框是否可以調整大小以調整多行消息？ 我知道理想情況下，工具提示最多應該是幾個詞，但我仍然很想探索它。

當前的：

預期的

我應該更改display屬性嗎？ 我嘗試更改為flex, inline, inline-flex, etc 。 但沒有一個工作。 甚至嘗試使用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但如果文本不夠長，則可能會留下大量空白。

這些更改應該正確定位工具提示和小箭頭指針，以免重疊。

Answer 2

從不換行到換行

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