Tooltip width hard to change

[vladimir-cucu]

Issue

There are instances where we would like to limit the max-width of Tooltip without setting a fixed width for it (e.g. the generated content is dynamic and can be long). Unfortunately, something simple like max-width: 20rem; white-space: pre-wrap; won't work, as, in the case the width of the Tooltip is 0, the text would just appear one word per line (as seen in the attached screenshot).

Possible fix

We could utilize something similar to breakLines from maas-ui and break long text into lines of specific length, which would allow us to indirectly set-up max-width of Tooltip.

Screenshot

[bartaz]

Triage: fixing tooltips in systematic way may be a hard issue, as they were not really designed to be handling a lot of formatted content and are hard to control from CSS side. This can be revisited and addressed in new architecture.

[bartaz]

@vladimir-cucu Do you think this issue is pressing enough that it should be addressed in current React components as well?

[vladimir-cucu]

@vladimir-cucu Do you think this issue is pressing enough that it should be addressed in current React components as well?

@bartaz Considering that the tooltips are not really designed to be handling a lot of formatted content and that this issue wasn't brought up in other projects, I would say it isn't pressing enough to be addressed in current React components, but it might be nice if it can be discussed about or addressed in the new architecture.

@huwshimi What is your opinion on this?

As a side note, here is the part that renders the tooltip from the attached screenshot and here is the CSS fix implemented in Juju Dashboard.

[huwshimi]

@huwshimi What is your opinion on this?

I think this keeps coming up as an issue in various projects, but doesn't necessarily need to be solved by the current tooltip. Maybe we need a new multi-line tooltip.