matTooltipDisabled
is used to disable tooltips in Angular. Using this we can conditionally show the tooltip.
<button mat-raised-button matTooltip="Disable tooltip" matTooltipDisabled="true">
Disable tooltip
</button>
We can dynamically change the [matTooltipDisabled]
input property by binding to a variable.
<button mat-raised-button matTooltip="Disable tooltip [matTooltipDisabled]="isDisabled">
Disable tooltip
</button>
If you want to change the color and other css property of the tooltip,
<button mat-raised-button matTooltip="Adding a custom class to the tooltip" matTooltipClass="mat-tooltip">
Custom tooltip
</button>
css file is as below
::ng-deep .mat-tooltip{
color: #3E474B !important;
background-color:#FCFCFC !important;
border-color: rgb(197, 197, 197);
font-size: 14px !important;
}