matTooltipClass not applying css

A blog post by Siderite (Styling Angular Material tooltips) provided an answer that worked for me. I am paraphrasing from the most-relevant portion of his post and I am using the matTooltipClass="tooltip" scenario described in the Question above:

[The .tooltip class definition] should either be in the global CSS file (so it applies to everything) or your component should declare encapsulation ViewEncapsulation.None. [If the .tooltip class definition is in the global CSS file], then ensure the declaration of the class is specific enough: try this: mat-tooltip-component .mat-tooltip.tooltip {...}.

In my case, I had defined the .tooltip class in the global styles.scss file, and it wasn't working until I followed Siderite's suggestion and defined it like this:

mat-tooltip-component .mat-tooltip.tooltip {
    color: blue !important;
}

This approach is avoids using ::ng-deep as suggested in the accepted Answer. Angular documentation states that approach is deprecated. I did find I needed to use !important, which some believe is bad style.

Angular material doc says matTooltipClass supports the same syntax as ngClass. thus you might try [matTooltipclass]="'tooltip'"

<mat-cell 
   *matCellDef="let productInfo" 
   matTooltip="{{productInfo.description}}"
   [matTooltipclass]="'tooltip'">
   {{ productInfo.description}}
 </mat-cell>

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

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

In addition to what was stated above, Here are two methods that worked for me: -in the Component.scss:

::ng-deep mat-tooltip-component{
    & .mat-tooltip{
        color: green; // your custom properties here.
    }
}

-Globally:

.mat-tooltip{ // making the font size on the mat-tooltip 1.5rem globally
    font-size: 1.5rem;
    &.exaggerated-tooltip{  // to modify the tooltip create a class like this
        font-size: 2.5rem;  // and use it like this: *matTooltipClass="exaggerated-tooltip"* in the
        color: red;         // component in which you are putting the tooltip
    }
}