How can I prevent a matTooltip text from being truncated?

Question

I have a page that displays a hostname. The hostname could be up to 63 characters, with no spaces. We truncate the text on the UI. But when the user hovers over the truncated text, we need a tooltip to appear and inform the user of the full hostname.

https://stackblitz.com/edit/truncatedtooltips?file=app%2Ftooltip-overview-example.html

I have this sample page on StackBlitz. There are two buttons in the sample, both with long text. The difference is that one has spaces, and the other does not.

The tooltip containing spaces does not get truncated, but unfortunately, the tooltip that lacks spaces gets truncated. Hostnames do not have spaces, hence tooltips do not behave as intended in this situation.

Can someone inform me what to do with the tooltip that does not contain any spaces?

Thank you.

Answer 1

The truncation happens with CSS. You can override that CSS like this:

.example-tooltip-red1 {
  word-break: break-all !important;
  white-space: normal !important;
}

Here is your original example with the updated CSS.

Note: I put the CSS into style.css and used the !important keyword, because I am not sure how the cascade works in Angular apps. You might want to avoid the !important keyword and put the CSS somewhere more appropriate.