With Angular v16, how to customize Angular Material Tooltip Component properly

Question

I've read the documentation about theming in Angular Material.

But what if I want to do some finer adjustments on certain component.

Take Tooltip component for example, I want to make the font size slightly bigger.

I made it working by overriding some classes like this.

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

But, based on the documentation on CSS Specificity, this way seems deemed to be brittle.

Each CSS declaration has a level of specificity based on the type and number of selectors used. More specific styles take precedence over less specific styles. Angular Material generally attempts to use the least specific selectors possible. However, Angular Material may change component style specificity at any time, making custom overrides brittle and prone to breaking.

Is there a non-brittle way to handle this?

Answer 1

You can do the following to increase the tooltip font size

@use '@angular/material' as mat;

@include mat.core();

/*

Set up your theme colours, typography etc

*/

$tt-typography: mat.define-typography-config(
  $caption: mat.define-typography-level(20px, 1.4, 400),
);

@include mat.tooltip-typography($tt-typography)