Css tooltip not sizing and wrapping nicely

Question

I have created a custom css tooltip, however the tooltip width is very narrow (only 1-2 words per line).

Fiddle example of the problem

I would like the tooltip size to be dynamically generated, as I will be using it in a few places with different lengths of text (the text may also change at a later date). Another reason I need it to be dynamic is that it needs to allow for browser resizing and mobile view.

I have done a bit of research and played around with (not limited to) the following properties:

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 of the above seem to give me a solution.

I can't use bootstrap in this project, but I am able to add JavaScript if that offers a possible solution.

Thanks in advance for any help.

Answer 1

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

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