Tooltip

Tooltip shows a brief label next to an element when the user hovers or focuses it. It is for short, supplementary text: the name of an icon button, a keyboard shortcut, or a one-line hint. Tooltips must be wrapped in a TooltipProvider (place one high in your app, or one per tooltip) so timing is shared.

Live demo

The interactive story below runs from the deployed Storybook.

Usage

Source: tooltip.tsx

import {
  TooltipProvider,
  Tooltip,
  TooltipTrigger,
  TooltipContent,
  Button,
} from "@beacon/design-system";

<TooltipProvider>
  <Tooltip>
    <TooltipTrigger asChild>
      <Button variant="outline">Hover me</Button>
    </TooltipTrigger>
    <TooltipContent>
      <p>Add to library</p>
    </TooltipContent>
  </Tooltip>
</TooltipProvider>

Parts

Part	Role
TooltipProvider	Required wrapper that shares hover/focus timing across tooltips.
Tooltip	Root state container for a single tooltip.
TooltipTrigger	The element that reveals the tooltip on hover or focus. Use asChild to wrap your own control.
TooltipContent	The floating label. Accepts sideOffset (defaults to 4); rendered through a portal.

When to use

• Naming icon-only buttons so their purpose is clear.
• Surfacing a keyboard shortcut or a short, non-essential hint.

Do not put interactive content, links, or anything the user must read to proceed in a tooltip: it is hover-only and not reliably reachable. Use a Popover for anchored interactive content.