How to achieve auto block width with position: absolute; depending on the text inside with a limit of max. width?

Question

css

There is a task to make a custom tooltip on hover in the sandbox of the code.
The problem is that you need to set the maximum width that the tooltip block can have, and until that moment the block should be of automatic width, therefore, when the max width is reached, the text inside should adjust and wrap.
If we remove the white-space: pre; then the words will be wrapped after each word and there will be a column of words, which is not very acceptable.
Help solve this problem

Answer 1

For example like this https://jsfiddle.net/wecrs39n/5/

Answer 2

https://jsfiddle.net/wecrs39n/3/