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

No, that is the way you do it. CSS class specificity.

The only thing that will break this is a more specific CSS selector. Your best bet is to wrap the whole thing in a class that you define, one that won't be duplicated by some other class trying to bogart your tooltip style.

This assumes you're looking for a global tooltip style for your app. If it is a specific component you're looking to style, then Angular CSS encapsulation will protect you.

Of course, if someone comes along later with an !important modifier, all bets are off. You should really never use !important, and if someone or some library does, I wouldn't use it/them. The only way you can beat !important is with another !important. It is a road to madness.

Answer 2

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)