InfoPopover

When to use

InfoPopover briefly explains what a label or value means, how it is calculated or why it is asked for. Unlike a Tooltip it opens on press, so it also works on touch screens.

When not to use

• For information needed to finish the task: Show it on the page as help text.
• For interactive content: Use Popover.
• To show an icon button’s name: A Tooltip is enough.

Anatomy

Field label

LightDark

Copy code

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

export default function Default() {
  return (
    <span className="inline-flex items-center gap-xs type-label-md">
      Field label
      <InfoPopover label="About the field label" title="Field label">
        A short explanation of why this field is asked for and how to fill it in goes here.
      </InfoPopover>
    </span>
  );
}

1. Info button: 32 px round icon button.
2. Panel: 240 px, with an arrow.
3. Title: Optional.
4. Explanation.

Behaviour

• Opens on button press and closes on a second press.
• Escape or an outside press closes it; focus returns to the button.
• If the panel has a link, focus moves to it; otherwise to the panel itself and its content is read.
• Opens above by default and flips below when there is no room.

Guidelines

• Name the button after what it explains: “About the field label”.
• Keep the explanation to three sentences.
• Use at most one info button per row.

Content

Turkish	English
Alan etiketi hakkında	About the field label
Daha fazla bilgi	More information

Related components

• Popover: A panel with interactive content.
• Tooltip: A short hint on hover.
• IconButton: The info button itself.