Hard to customize Angular material tooltips

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!

Continue reading...