Hard to customize Angular material tooltips

Question

MY angular project is using angular 18.2.3 and material is added using "ng add" to be compatible. BrowserModule, BrowserAnimationsModule, MatTooltipModule are imported and exported in shared.module.ts.

            <a [tabindex]="0" id="testTool"
               matTooltip="This is a static simple tooltip Text"
               matTooltipClass="special-class"
               aria-tooltip="Button that displays and hides a tooltip triggered by other buttons"
               matTooltipPosition="above" translate>Simple Tooltip Button</a>

But matTooltipClass does not work at all no matter ::ng-deep is used or not, put style in component SCSS file or in global styles.scss or not.

The only approach to make it work is via:

::ng-deep .mdc-tooltip__surface {
    /* white-space: pre !important; */
    font-family: monospace !important;
    color: white !important;
    background-color: black !important;
    padding: 10px !important;
    text-align: left !important;
    border-radius: 6px !important;
    max-width: unset !important;
    white-space: pre-wrap !important;
}

But this would bring a trouble: all tooltips can only have one style. I cannot specify another style for tooltip.

Any hint or help on this? Thanks!

pjpscriv · Accepted Answer · 2025-08-29 16:34:41Z

1

You have already used matTooltipClass which will add a class that we can use to conditionally style certain tooltips.

All you need to do, is scope your styling to this particular class.

Global Level:

Below is how it will look in the global styles scss file:

.special-class .mdc-tooltip__surface {
  /* white-space: pre !important; */
  font-family: monospace !important;
  color: white !important;
  background-color: black !important;
  padding: 10px !important;
  text-align: left !important;
  border-radius: 6px !important;
  max-width: unset !important;
  white-space: pre-wrap !important;
}

Component Level:

We can also write this at the component level, but it is more efficient to have it at the global level.

  ::ng-deep .special-class .mdc-tooltip__surface {
    /* white-space: pre !important; */
    font-family: monospace !important;
    color: white !important;
    background-color: black !important;
    padding: 10px !important;
    text-align: left !important;
    border-radius: 6px !important;
    max-width: unset !important;
    white-space: pre-wrap !important;
  }

Stackblitz Demo

edited Aug 29 at 16:34

pjpscriv

1,5441 gold badge17 silver badges35 bronze badges

answered Aug 29 at 6:50

Naren Murali

66.2k6 gold badges51 silver badges96 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Adventitious Angles Qs Poster Aug 29 at 16:36

Thanks for the reply. YES I knew using .mdc-tooltip__surface CSS in global styles.scss will make it work as i mentioned in the question, but this will make all the tooltips in the same style and hard to change style for a unique one. Also i found it is interesting that, matTooltipClass does not work on color, background-color, but position properties like top, left ... still works! this is so funny and i don't know why.

Collectives™ on Stack Overflow

Hard to customize Angular material tooltips

1 Answer 1

Global Level:

Component Level:

Stackblitz Demo

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Global Level:

Component Level:

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related