popover

v4.15.0

STATUS

Passing

DOWNLOADS

198

LICENSE

MIT

VISIBILITY

Public

PUBLISHED

5 years ago

SIZE

N/A

The Popover component displays floating content in relation to a target. Popovers appear either at the top, bottom, left or right of their target. The preferred and default side is the bottom. Popovers use smart positioning if there is not enough space.

Informational Components

Popover

React

UI Components

1 contributor

Install popover as a package?

Copied

npm i @bit/segmentio.evergreen.popover

Set Bit as a scoped registryLearn more

npm config set '@bit:registry' https://node.bit.cloud

Component Example

React

Vue

Angular

React Native

Add dependency...

Just

import

any of the 1 million components

and packages in Bit or NPM to the example.

import Button from '@bit/grommet.grommet.button';
import Lodash from 'lodash';

modifieddraft

Properties

Name	Type	Default value	Description
position	`Position.TOP \| Position.TOP_LEFT \| Position.TOP_RIGHT \| Position.BOTTOM \| Position.BOTTOM_LEFT \| Position.BOTTOM_RIGHT \| Position.LEFT \| Position.RIGHT`	`Position.BOTTOM`	The position the Popover is on. Smart positioning might override this.
isShown	`bool`		When true, the Popover is manually shown.
content (required)	`node \| function`		The content of the Popover.
children (required)	`element \| function`		The target button of the Popover. When a function the following arguments are passed: ({ toggle: Function -> Void, getRef: Function -> Ref, isShown: Bool })
display	`string`		The display property passed to the Popover card.
minWidth	`number \| string`	`200`	The min width of the Popover card.
minHeight	`number \| string`	`40`	The min height of the Popover card.
statelessProps	`{}`		Properties passed through to the Popover card.
animationDuration	`number`	`300`	Duration of the animation.
onOpen	`function`	`() => {}`	Function called when the Popover opens.
onClose	`function`	`() => {}`	Function fired when Popover closes.
onOpenComplete	`function`	`() => {}`	Function that will be called when the enter transition is complete.
onCloseComplete	`function`	`() => {}`	Function that will be called when the exit transition is complete.
bringFocusInside	`bool`	`false`	When true, bring focus inside of the Popover on open.
children	`node`		The content of the Popover.