Tooltip

A floating hint shown on hover or focus.

import { BuiTooltip } from 'ng-blatui';

<button buiButton variant="outline" buiTooltip="Add to library">Hover me</button>

Icon button

<button buiButton variant="outline" size="icon" buiTooltip="Add to library" aria-label="Add to library">
  <svg><!-- plus --></svg>
</button>

On many triggers

<button buiButton variant="outline" buiTooltip="Save your changes">Save</button>
<button buiButton variant="outline" buiTooltip="Share with your team">Share</button>

Sides

<!-- side = top | right | bottom | left -->
<button buiButton buiTooltip="Right" side="right">Right</button>

Delayed

<!-- delay the show by N ms -->
<button buiButton buiTooltip="Appears after 600ms" [delay]="600">Hover and wait</button>

Colors

<!-- recolour the bubble via tooltipClass -->
<button buiButton buiTooltip="Saved" tooltipClass="bg-emerald-600 text-white">Success</button>

No arrow

<button buiButton buiTooltip="A clean, arrowless tooltip">Hover me</button>