Tooltip
A short hint shown when an element is hovered or focused.Toolbar
Preview
Code
Installation
Package
CLI (copy source)
pnpm
pnpm add @advui/corenpm
npm install @advui/coreUsage
import { IconButton, Tooltip } from '@advui/core'
import { TrashIcon } from '@advui/icons'
<Tooltip content="Delete file">
<IconButton aria-label="Delete file" icon={<TrashIcon />} />
</Tooltip>API reference
Tooltip
| Prop | Type | Default | Description |
|---|---|---|---|
content required | ReactNode | — | The hint. Keep it short. |
side | 'top' | 'right' | 'bottom' | 'left' | 'top' | Preferred placement (flips to fit). |
delay | number | 300 | Hover delay in ms. |
disabled | boolean | false | Render only the trigger. |
open | boolean | — | Visibility, when you control it. |
defaultOpen | boolean | false | Starting `open` when uncontrolled. |
onOpenChange | (open: boolean) => void | — | Called with the new `open`. |
Accessibility
- Opens on hover and keyboard focus; Escape dismisses it (WCAG 1.4.13).
- The trigger is described by the tooltip via
aria-describedbywhile visible. - Tooltips are supplementary: essential info must be visible elsewhere, and icon buttons still need
aria-label.
| Key | Action |
|---|---|
| Tab (focus) | Shows the tooltip. |
| Escape | Hides the tooltip. |
Platform notes
Web
Positioned with Floating UI; flips and shifts to stay on screen.
iOS
Not rendered — touch has no hover. Only the trigger is shown.
Android
Not rendered — use a visible label or long-press hint instead.