Tooltip
Tooltips display informative text when users hover over, focus on, or tap an element.
Overview
- placement
- top · bottom
All options
Placement
Without placement the tooltip opens on the side with room. Hover or focus each button to compare.
auto (omitted)
top
bottom
Examples
Stays on screen
The tooltip renders in a portal, so overflow-hidden parents don't clip it. It opens on the side with room, flips when there isn't, slides along to stay inside the viewport, and wraps long text. Pass placement to force a side.
Accessibility
Keyboard
Keyboard focus shows the tooltip right away, while hover waits 300ms so it doesn't flash as the pointer passes over. Escape dismisses an open tooltip, and blur or click hides it.
Screen readers
The tooltip has role="tooltip", and while it is shown the first focusable element inside the trigger gets aria-describedby pointing at it.
Props
| Prop | Type | Required | Description |
|---|---|---|---|
| title | string | Yes | — |
| children | React.ReactElement | Yes | — |
| placement | 'top' | 'bottom' | No | Force placement. If omitted, picks the side with room. |