Tooltip

matTooltip for context-aware hints on hover or focus.

Basic Tooltips

Tooltips via matTooltip with positional variants.

Code
<button mat-raised-button
  matTooltip="Tooltip above"
  matTooltipPosition="above">
  Above
</button>

<button mat-raised-button
  matTooltip="Tooltip below"
  matTooltipPosition="below">
  Below
</button>

<button mat-raised-button
  matTooltip="Tooltip left"
  matTooltipPosition="left">
  Left
</button>

<button mat-raised-button
  matTooltip="Tooltip right"
  matTooltipPosition="right">
  Right
</button>

Tooltip Show & Hide Delay

matTooltipShowDelay and matTooltipHideDelay control when tooltips appear and disappear.

Code
<button mat-raised-button
  matTooltip="1s show / 500ms hide"
  [matTooltipShowDelay]="1000"
  [matTooltipHideDelay]="500">
  Show 1s / Hide 0.5s
</button>

<button mat-raised-button
  matTooltip="2s show / 1s hide"
  [matTooltipShowDelay]="2000"
  [matTooltipHideDelay]="1000">
  Show 2s / Hide 1s
</button>

<button mat-raised-button
  matTooltip="No delay"
  [matTooltipShowDelay]="0"
  [matTooltipHideDelay]="0">
  No delay
</button>