Tooltip

A light-surface tooltip built on React Aria - it opens on hover and focus, flips to stay on-screen, points a caret at its trigger, and blurs + scales from 0.9 on the way in and out. Hover any of the buttons below.

Positions

A tooltip can sit on any side of its trigger - set the placement prop on Tooltip to top (default), bottom, left or right. The caret and the blur-in transform rotate to match, and React Aria automatically flips to the opposite side if there isn't room on-screen. Hover the buttons below.

Every tooltip opens the same way, regardless of side: you hover or keyboard-focus the TooltipTrigger. The trigger's first child is the thing you point at (here our Button, wrapped in Focusable so a plain <button> becomes a valid trigger), and the Tooltip beside it is what pops up. So a left-side tooltip is just placement="left" - nothing about the interaction changes:

<TooltipTrigger delay={0}> <Focusable> <Button variant="secondary">Top</Button> </Focusable> <Tooltip placement="top">Top</Tooltip></TooltipTrigger>

Installation

You can add this tooltip component using our CLI or manually:

Dark mode ready - this component follows BoardUI semantic tokens automatically. Set up theme switching.

The CLI copies the component source (with its internal dependencies) into your project and installs any required npm packages.

npx boardui@latest add tooltip

Sizes

The tooltip comes in 2 sizes: sm (12px Caption 1, the default - used by the Contributions heatmap) and md (14px Body 1, with roomier padding). Switch by changing the size prop on the Tooltip - compare the Small and Medium triggers in the preview above.

<Tooltip size="sm">12 contributions on April 26</Tooltip>

Table of Contents

Tooltips are built on React Aria, so the trigger's single child must be a focusable component (react-aria Button, or anything using useFocusable). Hover and keyboard focus both open it, Escape closes it, and the trigger gets aria-describedbywired to the tooltip automatically. We'll cover the following topics:

  • Basic tooltip
  • Placement & the caret
  • Arrow & offset props
  • Open / close delay
  • Blur-and-scale transition

For a real-world use, hover the squares in the ContributionsCard - every cell is a TooltipTrigger showing its date and count.