Skip to main content

angular material - Show Tooltip on a specific position

app.component.html

<h2>
  Angular Material - Show Tooltip on a specific position
</h2>

<!-- position : left,right,above,below,before or after -->


<div style="padding:75px ;">
  <button mat-flat-button
    color="primary"
    matTooltip="This is a sample material tooltip"
    matTooltipPosition="above"
    aria-label="Display a material tooltip on button above
      on focused or hovered over">
        Tooltip on above
  </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