Components

Tooltip

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

Storybook: Storybook
Source: Source

The example below loads live from Storybook; open it in Storybook to use the controls.

Live example, StorybookOpen in Storybook

Default

Tooltip wraps one focusable element. It opens 400 ms after hover and at once on keyboard focus; Escape closes it.

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

export default function Default() {
  return (
    <Tooltip content="Saves the changes and closes the window.">
      <Button variant="secondary">Save</Button>
    </Tooltip>
  );
}

Sides

side: top, bottom, inline-start, inline-end. The logical sides swap in right-to-left text.

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

export default function Sides() {
  return (
    <div className="flex flex-wrap items-center gap-md">
      <Tooltip side="top" content="Saves the changes and closes the window.">
        <Button variant="secondary">Top</Button>
      </Tooltip>
      <Tooltip side="bottom" content="Saves the changes and closes the window.">
        <Button variant="secondary">Bottom</Button>
      </Tooltip>
      <Tooltip side="inline-start" content="Saves the changes and closes the window.">
        <Button variant="secondary">Start</Button>
      </Tooltip>
      <Tooltip side="inline-end" content="Saves the changes and closes the window.">
        <Button variant="secondary">End</Button>
      </Tooltip>
    </div>
  );
}

On an IconButton

IconButton shows its label in a tooltip by default; describes is off so the name is not read twice.

import { IconButton } from '@bigbang/ui';

export default function OnIconButton() {
  return (
    <div className="flex items-center gap-sm">
      <IconButton icon="copy" label="Copy" />
      <IconButton icon="x" label="Close" tooltipSide="bottom" />
    </div>
  );
}

Light and dark mode

The tooltip takes the color-surface-inverse background and color-text-inverse text; it stands out from the page in both modes.

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

export default function Default() {
  return (
    <Tooltip content="Saves the changes and closes the window.">
      <Button variant="secondary">Save</Button>
    </Tooltip>
  );
}