Customize Angular Material 2 Tooltip styles – Angular

The Problem:

How to customize the styles of tooltips in an Angular 4 application using Material2?

Example:

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

Displays a basic tooltip but without any custom styling.

The Solutions:

Solution 1: Using ::ng-deep or View Encapsulation.None

To customize the CSS of the Angular Material 2 tooltip, you can use ::ng-deep or set the View Encapsulation to None in your component.

Using ::ng-deep:

1. Add the following styles in your component’s styles:

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

2. This will allow you to style the tooltip using the .mat-tooltip selector.

Setting View Encapsulation to None:

1. In your component, add the following:

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

2. With this setting, you can style the tooltip directly using the .mat-tooltip selector in your component CSS.

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

Solution 2: Setup and style tooltip

You can set `` attributes that let you to customize the tooltip such as setting its position, show and hide delays. It also has a property `mdTooltipClass`, used to add custom CSS classes to the tooltip.

Here’s an example to get you started:

HTML:

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

Typescript:

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

CSS:

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

Final result:

Using the above code, you can customize the tooltip’s appearance by modifying the CSS accordingly.

Solution 3: Using `matTooltipClass`

To customize the appearance of tooltips in Angular 4 with Material 2, you can use the `matTooltipClass` attribute on the element that you want to add a tooltip to. This attribute allows you to specify a custom CSS class that will be applied to the tooltip. You can then style the tooltip in your CSS file.

For example, to add a red background to all tooltips, you could add the following CSS:

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

And then, you could use the `matTooltipClass` attribute to apply this class to your tooltips:

<button matTooltip="This is a tooltip" matTooltipClass="red-tooltip">Click me</button>

This would result in a red tooltip being displayed when you hover over the button.

Solution 4: Keep Angular’s modularity in mind

It’s essential to always use the matTooltipClass and a custom class. This allows for specific styling of tooltips without affecting other components.

Never use ::ng-deep directly on a material class, and never set encapsulation: ViewEncapsulation.None.

Angular components are designed to be modular and have their own styles. Using ::ng-deep or encapsulation: ViewEncapsulation.None can override styles that should remain contained within other components, leading to layout issues.