[Fixed] Customize Angular Material 2 Tooltip styles


In AngularJS is possible to style tooltips in CSS using the selector .md-tooltip

What is the way to have custom format tooltips in Angular 4?


I am using Angular 4 & Material2.

An example of how I am using it is:

<span mdTooltip='TEST' mdTooltipPosition='right'>TEST</span>

It shows the tooltip pretty fine, except the fact that I don´t know how to style it.


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:

    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;

Leave a Reply

(*) Required, Your email will not be published