matTooltipClass not applying css

Issue

I am attempting to apply some css changes to mat-tooltip from angular material 2 and found in the documentation a matTooltipClass that can then be selected in the css file to make changes. However, I am not able to get it working.

component.html :

  <mat-cell 
    *matCellDef="let productInfo" 
    matTooltip="{{productInfo.description}}"
    matTooltipClass="tooltip">
     {{ productInfo.description}}
  </mat-cell>

component.scss:

.tooltip {
background-color: red;
color: blue;
font-size: 20px;
}

Solution

You have to use ::ng-deep to override default CSS for material elements:

::ng-deep .tooltip {
  background-color: red;
  color: blue;
  font-size: 20px;
}

Answered By - bugs