Tooltip

When to use

Tooltip shows the name of icon buttons and gives a short, non-essential hint about a control.

When not to use

• For information needed to finish a task: Show it on the page, for example in the Field help text.
• For content with links or buttons: Use a Popover.
• On elements that cannot take focus: Keyboard users cannot open the tooltip.
• As the only source of information on touch screens: A tap does not open it.

Anatomy

Save

LightDark

Copy code

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>
  );
}

1. Trigger: the wrapped focusable element.
2. Box: inverse background, body-sm text, at most 240 px.
3. Arrow: an 8 px triangle pointing to the trigger.

Behaviour

• Opens after delay (400 ms by default) on hover and at once on keyboard focus.
• Closes when the pointer leaves, focus moves or Escape is pressed.
• Flips to the opposite side when there is no room.
• While open, it is linked to the trigger with aria-describedby; describes={false} turns this off.

Guidelines

• Keep the hint to one sentence.
• Do not repeat the trigger’s name; add information. IconButton is the exception.
• Do not put a tooltip on a disabled element; explain why on the page.

Content

• Write it as a sentence with a full stop; an icon name has no full stop.
• Tooltip text is product copy, not a library string.

Turkish	English
Kopyala	Copy
Değişiklikleri kaydeder ve pencereyi kapatır.	Saves the changes and closes the window.

Related components

• IconButton: shows its name in a tooltip.
• Field: permanent help text.