matTooltipClass not applying css

Question

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

Answer 1

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

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

Answer 2

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
    }
}

Answer 3

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.