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?
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;
...
}