Components

Tooltip

A short hint that appears beside an element on hover and keyboard focus.

Storybook: Storybook
Source: Source

Installation

Package: @bigbang/ui
Import: import { Tooltip } from '@bigbang/ui';
Source: Tooltip.tsx
Storybook: Tooltip · Playground

Tooltip is in the @bigbang/ui package.

import { Button, Tooltip } from '@bigbang/ui';

<Tooltip content="Saves the changes and closes the window.">
  <Button variant="secondary">Save</Button>
</Tooltip>;

Props

contentRequired

Description: Short text shown on hover and keyboard focus. Never put links or buttons in it; it cannot be reached.
Type: ReactNode

childrenRequired

Description: The element that shows the tooltip: one focusable element, such as a Button or IconButton.
Type: ReactElement

side

Description: Side of the trigger where the tooltip appears; inline-start and inline-end follow the text direction.
Type: 'top' | 'bottom' | 'inline-start' | 'inline-end'
Default: 'top'

align

Description: Alignment along that side.
Type: 'start' | 'center' | 'end'
Default: 'center'

delay

Description: Hover intent in milliseconds before the tooltip opens. Defaults to the motion.tooltip.delay token (400 ms); keyboard focus opens it at once.
Type: number
Default: 400

describes

Description: Links the tooltip to its trigger with aria-describedby while it is open. Turn it off when the content repeats the trigger's name, as on an IconButton.
Type: boolean
Default: true

onOpenChange

Description: Called with the new open state on hover, focus, Escape and outside press.
Type: (open: boolean) => void

disabled

Description: Never opens the tooltip; the trigger keeps working.
Type: boolean
Default: false

Data attributes

data-component="tooltip": on the popup.
data-part: popup, arrow.
data-side, data-open, data-starting-style, data-ending-style: from Base UI.