I am attempting to apply some css changes to mat-tooltip from angular material 2 and found in the documentation a matTooltipClass that can then be selected in the css file to make changes. However, I am not able to get it working.
component.html :
<mat-cell *matCellDef="let productInfo" matTooltip="{{productInfo.description}}" matTooltipClass="tooltip"> {{ productInfo.description}} </mat-cell> component.scss:
.tooltip { background-color: red; color: blue; font-size: 20px; } You have to use ::ng-deep to override default CSS for material elements:
::ng-deep .tooltip { background-color: red; color: blue; font-size: 20px; } 
In addition to what was stated above, Here are two methods that worked for me: -in the Component.scss:
::ng-deep mat-tooltip-component{ & .mat-tooltip{ color: green; // your custom properties here. } } -Globally:
.mat-tooltip{ // making the font size on the mat-tooltip 1.5rem globally font-size: 1.5rem; &.exaggerated-tooltip{ // to modify the tooltip create a class like this font-size: 2.5rem; // and use it like this: *matTooltipClass="exaggerated-tooltip"* in the color: red; // component in which you are putting the tooltip } } In Angular 15 I solved this problem as follows:
Component HTML file:
<mat-cell *matCellDef="let productInfo" matTooltip="{{productInfo.description}}" matTooltipClass="myTooltip"> {{ productInfo.description}} </mat-cell> Global CSS file:
.myTooltip { .mdc-tooltip__surface { max-width: 350px; padding: 5px; } } No need for ViewEncapsulation.None or !important, which could result in layout problems with the rest of your component and are to be avoided. Also, ::ng-deep being deprecated, I would advise against using it.
!important was still needed, though. And I definitely needed the ViewEncapsulation.None. There was no way to use it otherwise.A blog post by Siderite (Styling Angular Material tooltips) provided an answer that worked for me. I am paraphrasing from the most-relevant portion of his post and I am using the matTooltipClass="tooltip" scenario described in the Question above:
[The .tooltip class definition] should either be in the global CSS file (so it applies to everything) or your component should declare encapsulation ViewEncapsulation.None. [If the .tooltip class definition is in the global CSS file], then ensure the declaration of the class is specific enough: try this: mat-tooltip-component .mat-tooltip.tooltip {...}.
In my case, I had defined the .tooltip class in the global styles.scss file, and it wasn't working until I followed Siderite's suggestion and defined it like this:
mat-tooltip-component .mat-tooltip.tooltip { color: blue !important; } This approach is avoids using ::ng-deep as suggested in the accepted Answer. Angular documentation states that approach is deprecated. I did find I needed to use !important, which some believe is bad style.
Angular material doc says matTooltipClass supports the same syntax as ngClass. thus you might try [matTooltipclass]="'tooltip'"
<mat-cell *matCellDef="let productInfo" matTooltip="{{productInfo.description}}" [matTooltipclass]="'tooltip'"> {{ productInfo.description}} </mat-cell> From the example provided in the website (https://material.angular.io/components/tooltip/examples):
import {Component, ViewEncapsulation} from '@angular/core'; /** * @title Tooltip that can have a custom class applied. */ @Component({ selector: 'tooltip-custom-class-example', templateUrl: 'tooltip-custom-class-example.html', styleUrls: ['tooltip-custom-class-example.css'], // Need to remove view encapsulation so that the custom tooltip style defined in // `tooltip-custom-class-example.css` will not be scoped to this component's view. encapsulation: ViewEncapsulation.None, }) export class TooltipCustomClassExample {} If you stick that encapsulation: ViewEncapsulation.None line there for your component where you want to use your custom tooltip class, it ought to work. It's how I fixed the issue on my end.
Seeing that ::ng-deep is depricated now, best seems to be to add encapsulation: ViewEncapsulation.None, in your component decorator under your styleUrls line
Just be careful that all your css classes will be global then, so make sure your classes in that component have unique names if you do not want to overwrite the classes in other components accidentally
I found out there is a div element down the body with class="cdk-overlay-container". I considered its z-index. it was 1000 below the z-index of my modal. I made it the same as my modal's z-index, i.e. 1050. And it is working. I also had to put ::ng-deep before my class in CSS file.
::ng-deep .cdk-overlay-container { z-index: 1050; } In case your project prohibits to use: ::ng-deep, you can use
encapsulation: ViewEncapsulation.None
in the TS file.
In Angular 15, similarly to what @StackOverflowUser said, I managed to do it with this code in my styles.scss file:
mat-tooltip-component .mdc-tooltip__surface { background-color: mat.get-color-from-palette(themes.$palette-tooltip, 400) !important; } Inside matTooltipclass you have to use '' for the custom class
For example [matTooltipclass]="'customTooltip'"
In my case, it worked using this in the component.scss file:
::ng-deep .mdc-tooltip__surface { max-width: unset !important; } 