Custom css class does not apply for a tooltip in Angular Material 15

434 Views Asked by At

After updating Angular Material until version 15 I lost a possibility to apply coloring to the material tooltip.

This is a code in .html:

    <button mat-raised-button matTooltip="Tooltip message" matTooltipClass="custom-tooltip">
      <mat-icon>info</mat-icon>
    </button>

This code is not working with MatTooltipModule importing in app.module.ts:

import { MatTooltipModule } from '@angular/material/tooltip';

However it works correct with legacy importing (which I want to get rid off):

import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/legacy-tooltip';

Thank you for your help in advance!

1

There are 1 best solutions below

0
On

Check this one.

   ::ng-deep.mat-mdc-tooltip {
--mdc-plain-tooltip-container-color: #ff4141;
--mdc-plain-tooltip-supporting-text-color: #000;

}

https://stackblitz.com/edit/mamxg3-tsjszm?file=src%2Fexample%2Ftooltip-overview-example.html,src%2Fexample%2Ftooltip-overview-example.ts