Not able to change the background color of the mat tooltip modal using the matTooltipClass class

[SantoshNayak]

          The [Material Design guidelines](https://material.io/guidelines/components/tooltips.html#tooltips-tooltips-desktop) goes against what you are trying to do since it specifies only one color can be used, but it can be possible. Just use the `matTooltipClass` input:

<span matTooltip="Tooltip!" matTooltipClass="primary-tooltip">Content</span>

.primary-tooltip {
    background-color: #3F51B5;
}

Originally posted by @EdricChan03 in https://github.com/angular/components/issues/8296#issuecomment-342753938

[magentaRE]

Any updates on this?

[GeorgeKnap]

Half a year open ticket without any care. That is sad as this was surely a breaking change in one of the previous releases.

Applying custom style via matTooltipClass used to work before v16. I'ved realized in one of my projects on v16 that it is broken and doesn't work even in stackblitz in v17

[servicomf5]

Does anyone know if the name of the property changed?

[detollenaere]

same issue with v17. Any updates ?

[angelsaga]

Works with v18 // Global Modification

.mat-mdc-tooltip {
    font-size: 0.75rem;
}

// Custom Modification

 .your-css .mdc-tooltip__surface {
    color: black;
    background: white;
  }

[KenPlat]

With Angular 18, I was able to use a small spin from angelsaga's approach in my component.scss to style the colors on the matToolTip:

.mdc-tooltip__surface { color: black !important; background-color: white !important; }

The !important declaration was indeed necessary. Also, my component.ts has the encapsulation set to none.

encapsulation: ViewEncapsulation.None

[dackdada016]

As suggested by KenPlat, I used the same approach, and it works in Angular 17 as well:

1. Add encapsulation: ViewEncapsulation.None to the component decorator.
2. Add the original matTooltipClass to the element.
3. Set the expected styles and add !important.

.tooltip-danger .mdc-tooltip__surface {
  font-size: 14px !important;
  color: red !important;
  background-color: white !important;
}

This can be used normally.