Skip to main content

angular material - How to apply custom css style in Tooltip

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-color: LightBlue;
      font-size: 16px;
      font-style: italic;
      padding: 8px;
      border-bottom: 4px solid Navy;
      color: Black !important;
    }
  `]
})


export class AppComponent { }
app.component.html 

<h2>
  Angular Material - Apply custom css style in Tooltip
</h2>


<div style="padding:50px;">
  
  <button mat-flat-button
    color="primary"
    matTooltip="Sample material tooltip with custom css style"
    matTooltipClass="tooltip-custom-class"
    matTooltipPosition="right"
    aria-label="Display a material tooltip with custom
      css style on focused or hovered over">
        Show Tooltip
  </button>
  
</div>
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: