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.

Installation

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

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>

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>

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.