Skip to content

Tooltip

Base UI

A short ink label on hover or focus.

Install

$ npx shadcn@latest add https://spotcheckui.com/r/tooltip.json

Also installs @base-ui/react.

Usage

import { Tooltip } from "@/components/spotcheck/tooltip"
import { Button } from "@/components/spotcheck/button"

<Tooltip content="Runs in the background">
  <Button>Queue run</Button>
</Tooltip>

Tooltips are for sighted pointer and keyboard users. They never appear on touch, and screen readers don't get the text, so give the control its own label and keep essential information out.

Props

  • content * RequiredReactNodeDefault —The tooltip text.
  • children * RequiredReactElement<Record<string, unknown>, string | JSXElementConstructor<any>>Default —One focusable element, such as a button.
  • side"top" | "right" | "bottom" | "left"Default top
  • classNamestringDefault —

Keyboard

TabFocus the control to show the tooltip
EscHide the tooltip

Reduced motion

The label appears without animation.