angularangular-materialangular-material2

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?

EDIT:

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.

Solution

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