Css 工具提示没有很好地调整大小和包装

Question

我创建了一个自定义 css 工具提示，但是工具提示的宽度非常窄（每行只有 1-2 个字）。

Fiddle example of the problem

我希望工具提示大小是动态生成的，因为我将在一些文本长度不同的地方使用它（文本也可能在以后更改）。我需要它是动态的另一个原因是它需要允许浏览器调整大小和移动视图。

我做了一些研究并尝试了（不限于）以下属性：

width: auto; /*doesn't change anything*/
max-width: ;/*max and min not useful as I want it to be dynamic*/
min-width: ;
white-space: normal; /*neither change anything*/
text-wrap: normal;

None 上面的似乎给了我一个解决方案。

我无法在此项目中使用 bootstrap，但如果 JavaScript 提供了可能的解决方案，我可以添加它。

在此先感谢您的帮助。

Answer 1

解决方案是将 position: absolute; 更改为 position: relative。然而，这搞乱了一些其他需要修复的依赖样式。

推理：绝对需要设置宽度，而相对可以是动态的。