angular-materialangular-material-15

Angular 15 (MDC) tooltip background color (via theme)


With Angular14 I was able to define the mat-tooltips background color via

$theme: (
    color: (
        ...
        background: (
           ...,
            tooltip: red
        )
    )
)
@include mat.all-component-colors($theme);

Now a property named color.background.tooltip even gets generated by calling mat.define-light-theme but isn't applied. What has changed here?


Solution

  • You can override the css variables:

    .cdk-overlay-container .mat-mdc-tooltip {
      --mdc-plain-tooltip-container-color: red;
      --mdc-plain-tooltip-supporting-text-color: white;
      --mdc-plain-tooltip-container-shape: 4px;
      --mdc-plain-tooltip-supporting-text-line-height: 16px;
      --mdc-plain-tooltip-supporting-text-size: 12px;
      --mdc-plain-tooltip-supporting-text-weight: 400;
      --mdc-tooltip-word-break: normal;
      ...
    }