Skip to main content

angular material - How to change Tooltip background color

app.component.ts 

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  encapsulation: ViewEncapsulation.None,
  styles: [`
    .tooltip-custom-class {
      background: green;
    }
  `]
})


export class AppComponent { }
app.component.html 

<h2>
  Angular Material - How to change Tooltip background color
</h2>


<button mat-flat-button
  color="primary"
  matTooltip="This is a sample material tooltip"
  matTooltipClass="tooltip-custom-class"
  aria-label="Display a material tooltip in a different
    background color on focused or hovered over">
      Show Tooltip
</button>
app.module.ts [import] 

// for material button
import {MatButtonModule} from '@angular/material/button';

// for material tooltip
import {MatTooltipModule} from '@angular/material/tooltip';
More Angular tutorials
Labels: