Tooltip
A small floating label on hover or focus, wrapping the Base UI Tooltip. It sits on the same translucent surface as dropdowns and fades in, flips sides when out of room, and shows on keyboard focus, not just the pointer.
Playground
Every control maps to a prop. Hover or focus the button to open the tooltip; the Code tab always shows the markup for exactly what you've configured.
Variants
One look, four sides. side on the content picks where the label prefers to sit (top by default), align nudges it along that edge, and when the viewport runs out of room it flips to the opposite side by itself. Each arrow points where its tooltip opens.
Styling states
The popup carries data-side for the side it actually rendered on (after flipping), plus data-starting-style and data-ending-style during the enter and exit transitions; the trigger carries data-popup-open while its tooltip shows:
.ub-tooltip-popup {
background: var(--ub-text-primary);
color: var(--ub-bg);
}
.ub-tooltip-trigger[data-popup-open] {
color: var(--ub-text-primary);
}Props
Each part passes the full Base UI API through. A tooltip describes its trigger; it never replaces the trigger's own accessible name (keep aria-label on icon-only buttons).
| Prop | Type | Default | Description |
|---|---|---|---|
TooltipTrigger.render | ReactElement | – | The real control the tooltip attaches to, usually a Bones Button. |
TooltipTrigger.delay | number | 600 | Milliseconds before opening on hover; focus opens instantly. Timing lives on the trigger, along with closeDelay. |
TooltipContent.side | "top" | "right" | "bottom" | "left" | "top" | Preferred side; flips to the opposite when out of room. Position lives on the content, along with align. |
TooltipContent.sideOffset | number | 8 | Gap between the trigger and the tooltip, in pixels. |
TooltipRoot.open | boolean | – | Controlled state. Pair with onOpenChange. |
TooltipRoot.disabled | boolean | false | Keeps the tooltip closed; the trigger carries data-trigger-disabled. |
TooltipProvider.delay | number | – | Shared delay for a group of tooltips; moving between them opens instantly. |
Agent instructions
Working with a coding agent? Paste this into its context, or point it at llms.txt for the whole library.
TooltipRoot, TooltipTrigger, TooltipContent, TooltipProvider, from @usebones/react.
- Structure: TooltipRoot wraps TooltipTrigger + TooltipContent. Attach to a real control via TooltipTrigger render={<Button ... />}; trigger children render inside that control.
- A tooltip is a description, never a name: icon-only triggers still need their own aria-label.
- TooltipContent: side "top" (default) | "right" | "bottom" | "left", align, sideOffset (8). Timing on the trigger: delay (600ms), closeDelay. TooltipRoot: open + onOpenChange, disabled.
- Wrap toolbars in TooltipProvider so tooltips share one delay.
- Enter and exit run on --ub-duration-* tokens, so reduced motion is respected with no extra code.
- Restyle in CSS via .ub-tooltip-popup, [data-side], [data-starting-style]/[data-ending-style] for enter/exit, and [data-popup-open] on the trigger. Tokens only.