Tooltip width hard to change

### 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`](https://github.com/canonical/maas-ui/blob/main/src/app/utils/breakLines.ts) and break long text into lines of specific length, which would allow us to indirectly set-up `max-width` of `Tooltip`.

### Screenshot