Tooltip
Accessible tooltips: shown on hover and keyboard focus, dismissed with Escape, positioned in a portal with collision handling — never clipped by overflow containers.
Direction Examples
Size Examples
Delay Example
Rich content & titles
Snippet
import { Tooltip, TooltipDirection, TooltipSize } from '@creo-team/buzz-ui/client'
// Basic usage — hover and keyboard focus both show it
<Tooltip content="Simple tooltip">
<Button>Hover me</Button>
</Tooltip>
// Positioning and size
<Tooltip content="Right side" placement="right" size="md">
<Button>Right</Button>
</Tooltip>
// Optional bold title above the content
<Tooltip title="Heads up" content="Rich explanation lives here." size="md">
<Button>With title</Button>
</Tooltip>
// Controlled
<Tooltip content="Always visible" open onOpenChange={setOpen}>
<Button>Controlled</Button>
</Tooltip>
// Animations are CSS-driven — override the styling hooks if you want a
// different feel (no animation library involved):
// .bz-tooltip { animation: my-entrance 200ms ease; }API
| Prop | Type | Default | Description |
|---|---|---|---|
content* | ReactNode | — | Tooltip content (text or React elements) |
title | string | — | Optional bold heading rendered above the content |
direction | TooltipDirection | TooltipDirection.Bottom | Preferred side; flips automatically when there is no room |
placement | 'top' | 'right' | 'bottom' | 'left' | 'bottom' | Legacy alias for direction (still supported) |
size | TooltipSize | 'sm' | 'md' | 'lg' | 'xl' | TooltipSize.Compact | Size preset (padding + max width) |
delayMs | number | 400 | Hover delay before showing (focus shows immediately) |
open | boolean | — | Controlled visibility |
onOpenChange | (open: boolean) => void | — | Visibility change callback |
widthClassName / contentClassName | string | — | Extra classes for the bubble |
See the full API: /components/tooltip/api