Tooltip

Powered by

Base UIShadcn UIAnimate UIMotion

Installation

Positioning

When to use

Tooltips provide contextual hints for UI elements. Use this decision tree:

Usage

<TooltipProvider>
  <Tooltip>
    <TooltipTrigger>Hover me</TooltipTrigger>
    <TooltipContent>Tooltip content</TooltipContent>
  </Tooltip>
</TooltipProvider>

Props

Animate UI Props

TooltipContent

Keyboard interactions

Accessibility

• Tooltips are supplementary — never put critical information inside that isn't available elsewhere. Many users (touch, screen-reader, keyboard-only) cannot reliably trigger tooltips.
• The trigger must be focusable (<button>, <a href>, or another interactive element via asChild). Wrapping a disabled button requires a focusable outer wrapper (e.g. a <span tabIndex={0}> or a non-disabled styled div).
• Content is wired up via aria-describedby on the trigger so screen readers read the tooltip as supplementary.
• Wrap multiple tooltips in a single TooltipProvider — Base UI shares a delay / timeout pool so rapid-hover tooltips don't re-fire the delay.

Controlled vs uncontrolled

Uncontrolled — typical case:

<Tooltip>
  <TooltipTrigger asChild><Button>Save</Button></TooltipTrigger>
  <TooltipContent>Save (⌘S)</TooltipContent>
</Tooltip>

Controlled — force the tooltip open (e.g. to highlight a newly-added feature):

const [open, setOpen] = useState(true);

<Tooltip open={open} onOpenChange={setOpen}>
  <TooltipTrigger asChild><Button>New</Button></TooltipTrigger>
  <TooltipContent>This is new — click to try it</TooltipContent>
</Tooltip>

Credits

• We use Base UI for the tooltip component.
• We take our inspiration from Shadcn UI for the tooltip style.
• We use Animate UI from imskyleen for all the animations.