custom styling for Material Tooltip on Angular 17

Question

I have an angular 17 app with latest Material components.

I am using the Tooltip component extensively and having problems finding how to customize it.

I did manage to change the font size using the following code in CSS:

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

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

But this is only for font size and weight. I would also like to customize the line height, width of the tooltip and so on.

Can I do this with this code? If so, what more options can I set in it for these goals?

I should mention that I've already tried various CSS selectors that are supposed to override the defaults of Material (which is obviously the simplest and easiest way, if possible), but with no success so far.

Answer 1

The define-typography-level has the following definition in the source code

code change:

// `font-size`, `line-height`, `font-weight`, `font-family`, and `letter-spacing`.
$my-custom-typography-config: mat.define-typography-config(
  $caption:
    mat.define-typography-level(
      $font-size: 24px,
      $line-height: 24px,
      $font-weight: 400,
      $font-family: Helvetica,
      $letter-spacing: normal,
    ),
);

@include mat.tooltip-typography($my-custom-typography-config);

typography.md

## Typography levels

A **typography level** is a collection of typographic styles that corresponds to a specific
part of an application's structure, such as a header. Each level includes styles for font family,
font weight, font size, and letter spacing. Angular Material uses the [typography levels
from the 2018 version of the Material Design specification][2018-typography], outlined in the
table below.

| Name            | Description                                                  |
|-----------------|--------------------------------------------------------------|
| `headline-1`     | One-off header, usually at the top of the page (e.g. a hero header). |
| `headline-2`     | One-off header, usually at the top of the page (e.g. a hero header). |
| `headline-3`     | One-off header, usually at the top of the page (e.g. a hero header). |
| `headline-4`     | One-off header, usually at the top of the page (e.g. a hero header). |
| `headline-5`     | Section heading corresponding to the `<h1>` tag.             |
| `headline-6`     | Section heading corresponding to the `<h2>` tag.             |
| `subtitle-1`     | Section heading corresponding to the `<h3>` tag.             |
| `subtitle-2`     | Section heading corresponding to the `<h4>` tag.             |
| `body-1`         | Base body text.                                              |
| `body-2`         | Secondary body text.                                         |
| `caption`        | Smaller body and hint text.                                  |
| `button`         | Buttons and anchors.                                         |

[2018-typography]: https://m2.material.io/design/typography/the-type-system.html#type-scale

### Define a level

You can define a typography level with the `define-typography-level` Sass function. This function
accepts, in order, CSS values for `font-size`, `line-height`, `font-weight`, `font-family`, and
`letter-spacing`. You can also specify the parameters by name, as demonstrated in the example below.

```scss
@use '@angular/material' as mat;

$my-custom-level: mat.define-typography-level(
  $font-family: Roboto,
  $font-weight: 400,
  $font-size: 1rem,
  $line-height: 1,
  $letter-spacing: normal,
);
```

Stackblitz Demo