Skip to main content

angular material - Show & hide Tooltip on button click

app.component.html 

<h2>
  Angular Material - Show & hide Tooltip on button click
</h2>


<div style="padding:25px; 
  justify-content:space-between; display:flex; width:300px;">
    <button mat-flat-button 
      (click)="tooltip.show()" color="primary">
        Show Tooltip
    </button>

    <button mat-flat-button 
      (click)="tooltip.hide()" color="warn">
        Hide Tooltip
    </button>
</div>


<div style="padding:25px;">
  
  <button mat-flat-button
    color="secondary"
    matTooltipPosition="right"
    matTooltip="Sample material tooltip"
    #tooltip="matTooltip"
    aria-label="Display and hide a material tooltip 
      on another button click">
        Tooltip Button
  </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: