Customize Angular Material 2 Tooltip styles

If you want to customize the css of the tooltip, then you can use ::ng-deep. Add the following styles in your component’s styles:

::ng-deep .mat-tooltip {
    /* your own custom styles here */ 
    /* e.g. */
    color: yellow;
}

Another option is to set the View Encapsulation to None in your component:

@Component({ 
    templateUrl: './my.component.html', 
    styleUrls: ['./my.component.css'], 
    encapsulation: ViewEncapsulation.None
})

Then in your component css you dont have to use ::ng-deep.

.mat-tooltip {
    /* your own custom styles here */ 
    /* e.g. */
    color: yellow;
}