Components

Tooltip

Angular Material Tooltip provide additional information when users hover over or long-press on an element. The small panel fades in next to the element and can be placed above, below or to either side of it, with the delay before it appears and disappears set to taste. BuilderKit restyles the panel, its typography and its shadow so the matTooltip directive matches the rest of the design system.

Official docs API reference

A tooltip attaches to any element, and it is most often used on an icon button where the icon alone does not say what the action does.

Example

Below is an example of how BuilderKit restyles the Angular Material Tooltip and gives it a more modern appearance.

<button matButton matTooltip="Info about the action">
  Action
</button>

Tooltip positions

A tooltip sits below its element by default, and it can be moved above it or to either side. Hover over the buttons below to see each placement.

<button matButton matTooltip="Shown above" matTooltipPosition="above">
  Above
</button>

<button matButton matTooltip="Shown after" matTooltipPosition="after">
  After
</button>

Tooltip with a show delay

A delay keeps the panel out of the way while the pointer only passes over the element, and shows it once the pointer stays put.

<button matButton matTooltip="Waited a second for this" [matTooltipShowDelay]="1000">
  Hover and wait
</button>