Skip to main content

angular material - How to set Tooltip show hide delay

app.component.html

<h2>
  Angular Material - How to set Tooltip show hide delay
</h2>


<div style="padding:50px;">
  
  <button mat-flat-button
    color="primary"
    matTooltip="Sample material tooltip show hide delay"
    matTooltipPosition="right"
    matTooltipShowDelay="2000"
    matTooltipHideDelay="3000"
    aria-label="Display a material tooltip with show delay
      2000 milliseconds/2 seconds and hide delay 3000 milliseconds
      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