Skip to main content

angular material - Toggle Tooltip visibility on button click

app.component.html 

<h2>
  Angular Material - Toggle Tooltip visibility on button click
</h2>


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

    <button mat-flat-button
      color="secondary"
      matTooltip="Sample material tooltip"
      #tooltip="matTooltip"
      aria-label="Display and hide a material tooltip 
        on another button click">
          Tooltip Related 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: