Tooltip

Hover and focus bubble linked to its trigger with aria-describedby. The provider is built in — pass your trigger as the child.

Preview

Usage

<Tooltip content="Copy link">
  <button aria-label="Copy link">
    <CopyIcon aria-hidden />
  </button>
</Tooltip>

<Tooltip content="Writes changes to the draft" side="bottom" showArrow={false}>
  <Button>Save</Button>
</Tooltip>

Reference

Prop	Type	Default	Description
content(required)	ReactNode	—	The bubble text. Keep it short — it is announced via aria-describedby.
side	"top" \| "right" \| "bottom" \| "left"	"top"	Preferred side of the trigger; flips when it would overflow the viewport.
align	"start" \| "center" \| "end"	"center"	Alignment of the bubble along the trigger edge.
sideOffset	number	6	Gap in pixels between trigger and bubble.
showArrow	boolean	true	Draws the small pointer between trigger and bubble.
open / onOpenChange	boolean / (open: boolean) => void	—	Controlled open state (forwarded to the Radix root).
className	string	—	Applied to the bubble; merged last, so you can override width or padding.

Accessibility

The trigger gets aria-describedby while the bubble is open, so the description is announced with the trigger.
Escape dismisses an open tooltip without moving focus.
Tooltips must supplement an accessible name (visible label or aria-label), never be the only label.
The bubble itself is not focusable — do not put interactive elements or essential-only information inside content.
The component wraps a Radix TooltipProvider (skipDelayDuration 200ms), so hovering away and back re-opens quickly.

Live preview