InfoPopover

Installation

Package

@bigbang/ui

Import

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

Source

InfoPopover.tsx

Storybook

InfoPopover · Playground

InfoPopover is in the @bigbang/ui package.

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

<InfoPopover label="About the field label" title="Field label">
  Short explanation.
</InfoPopover>;

Props

childrenRequired

Description

Explanation shown on press: a few sentences, and at most a link.

Type

ReactNode

label

Description

Name of the info button, saying what it explains, such as "Alan etiketi hakkında". Defaults to the ui.infoPopover.label library string ("Daha fazla bilgi" or "More information").

Type

string

title

Description

Heading inside the panel. Without it, the panel is named by label.

Type

ReactNode

side

Description

Side of the button where the panel opens; it flips when there is no room.

Type

PopoverSide

Default

'top'

icon

Description

Icon on the button: info for an explanation, circle-help for help on how to fill in a field.

Type

'info' | 'circle-help'

Default

'info'

Data attributes

• data-component="info-popover": on the panel; the button has data-component="icon-button".