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>

API reference

[buiTooltip]

Inputs

Prop	Type	Default	Description
`buiTooltip`*	`string`	—	Tooltip text; bound via the `buiTooltip` attribute.
`side`	`TooltipSide`	`'top'`	Preferred placement side relative to the host, with an automatic flip fallback.
`delay`	`number`	`0`	Delay in milliseconds before the tooltip appears on hover/focus.
`tooltipClass`	`ClassValue`	`''`	Extra classes applied to the tooltip bubble (e.g. a semantic colour).

bui-tooltip-content

Inputs

Prop	Type	Default	Description
`text`	`string`	`''`	Text rendered inside the tooltip bubble.
`extraClass`	`ClassValue`	`''`	Extra classes (e.g. a colour override) merged over the base bubble styles.

Types

TooltipSide — Side of the host the tooltip prefers to appear on.

"bottom" | "left" | "right" | "top"

Every ng-blatui component also accepts a class input to merge extra Tailwind classes onto the host.