Components/Tooltip
Tooltip
A lightweight floating label that appears on hover or focus, giving users contextual information without cluttering the interface. Supports four placements and an optional open delay.
import { Tooltip } from "@animui/ui"Basic usage
Wrap any element with Tooltip and supply a content prop.
Placement
Use placement to control which side the tooltip appears on.
Delay
Pass a delay (ms) to prevent tooltips from flashing when the cursor briefly passes over.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
content | string | ReactNode | — | The text or element shown inside the tooltip bubble. |
placement | "top" | "bottom" | "left" | "right" | "top" | Which side of the trigger the tooltip appears on. |
delay | number | 0 | Milliseconds to wait before the tooltip becomes visible after hover. |
children | ReactNode | — | The element that triggers the tooltip on hover / focus. |
className | string | — | Extra Tailwind classes applied to the tooltip bubble container. |
Accessibility
- ✓The tooltip bubble has
role="tooltip"and the trigger getsaria-describedbypointing to it. - ✓Opens on both
mouseenterandfocusso keyboard users see it too. - ✓Pressing Escape closes the tooltip.
- ✓Tooltip content is never the sole means of conveying critical information (WCAG 1.4.13).