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.

And for what it is worth, I would be careful with using `::ng-deep` as it is deprecated in Angular 7 — Rinktacular, May 03 '19 at 16:29
@Rinktacular Thanks for pointing that out - will fix that too, but that's for another day. — coconut, May 03 '19 at 18:07

Eiman · Accepted Answer · 2023-07-27T12:00:14.743

25

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

Update (2023-07-23): Workaround for Angular 15+

The old answer no longer works because Angular Material has migrated to MDC-based components since Angular 16. To solve the problem, you should override the max-width rule for the internal MDC CSS class: mdc-tooltip__surface. In order to achieve this, define the global CSS class as follows instead:

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

Working Stackblitz example with Angular 16: https://stackblitz.com/edit/ncaweg

edited Jul 27 '23 at 12:00

answered May 03 '19 at 22:26

Eiman

561
5
10

Thx "max-width: unset !important;" does the trick. There is one thing I still don't understand - to what element is it applying the style? If I observe the element in my browser I cannot find the max-width styling on the button or elsewhere ... ? – coconut May 04 '19 at 10:02
1

Components such as Tooltip, Dialog, etc will be inserted in `cdk-overlay-container`. It's outside of your components hierarchy. You can find the actual tooltip DOM element by inspecting the html. You can see this and the `my-custom-tooltip` CSS rule in the following image: https://i.imgur.com/GTttzJx.png Let me know if you have any other questions. – Eiman May 04 '19 at 13:25
Ah ok - the hover closed on me when I was trying to inspect it, that's why I couldn't see it - thx! If anyone else struggles to inspect the hover check out the question here: https://stackoverflow.com/questions/15370838/inspect-hovered-element-in-chrome – coconut May 04 '19 at 13:52
3

If you want to see the actual element in DOM, you can set `matTooltipHideDelay` to a big number, e.g. `matTooltipHideDelay="60000"` – Eiman May 04 '19 at 17:27
This does not seem to work anymore for v16+. I tried many different ways but could not get it working... – Alfa Bravo Jul 20 '23 at 10:21
Updated answer with the workaround for Angular 16+ – Eiman Jul 22 '23 at 22:55

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

1 Answers1