Search code examples
javascripthtmlcsstooltip

Css tooltip not sizing and wrapping nicely

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.

Solution

  • The solution was to change position: absolute; to position: relative. This, however, messed up some other dependent styling which would need to be fixed.

    Reasoning: Absolute requires a width to be set whereas relative can be dynamic.