Customize Angular Material 2 Tooltip styles

Question

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.

Answer 1

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

Answer 2

You could take a look into the following example angular/material2 Tooltip Demo

Basically you could set up the tooltip as follows (you could define not only the css but also the position, the hide delay, the show delay and if it is disable or not):

<button #tooltip="mdTooltip"
            md-raised-button
            color="primary"
            [mdTooltip]="message"
            [mdTooltipPosition]="position"
            [mdTooltipDisabled]="disabled"
            [mdTooltipShowDelay]="showDelay"
            [mdTooltipHideDelay]="hideDelay"
            [mdTooltipClass]="{'red-tooltip': showExtraClass}">

In your component then

position: TooltipPosition = 'below';
message: string = 'Here is the tooltip';
disabled = false;
showDelay = 0;
hideDelay = 1000;
showExtraClass = true;

And the css as example:

/deep/ .red-tooltip {
  background-color: rgb(255, 128, 128);
  color: black;
}

Answer 3

Simply add a matTooltipClass="red-tooltip" in your input tag may be. And then in styles.css add the definition for this class

<input type="number" matTooltipClass='red-tooltip'/>

.red-tooltip{
       background-color:red;
}