Mattooltip: How can I make the box fit the text?

Question

I have this text that I want to display as tooltip. Without styling (just font-size defined as 16px) it looks like this:

What I actually want is to have the text displayed in one line - so I set the white-space to pre in the css:

::ng-deep .mat-tooltip {
  font-size: 16px;
  white-space: pre;
}

But now the text goes outside the box of the tooltip:

I tried setting the width to a higher px value but that did nothing.

Is there a way to make the box fit the text?

[EDIT - Added missing example as was pointed out in the comments]: stackblitz link
The text in the example does not leave the box but is abbreviated instead of the box fitting around the whole text altough I set the width to 400px.

Answer 1

Just set the max-width to unset. To do so, define a global CSS class as follows:

.my-custom-tooltip {
  max-width: unset !important;
}

Then pass the class name to the tooltip:

<button mat-raised-button
        matTooltip="This Infotext is displayed one line if possible. Just a little more text for demo!"
        matTooltipClass="my-custom-tooltip">
  Action
</button>

Also as @rinktacular mentioned, try not to use ng::deep.

Working Stackblitz example: https://stackblitz.com/edit/angular-qkh4cl