Start sharing components as a team!Share components as a team!Join Bit to build your applications faster.Get Started Free

popover

v4.15.0arrow_drop_down
v4.15.0
STATUS
Passing
DOWNLOADS
96
LICENSE
MIT
VISIBILITY
Public
PUBLISHED
10 months 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.
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.dev
Component Example
React
React
Vue
Angular
React Native
Add dependency... help_outline
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';
toggle layout
modifieddraft
modifieddraft
modifieddraft
chevron_left
chevron_right
Properties
NameTypeDefault valueDescription
position
Position.TOP | Position.TOP_LEFT | Position.TOP_RIGHT | Position.BOTTOM | Position.BOTTOM_LEFT | Position.BOTTOM_RIGHT | Position.LEFT | Position.RIGHTPosition.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 | string200

The min width of the Popover card.

minHeight
number | string40

The min height of the Popover card.

statelessProps
{}

Properties passed through to the Popover card.

animationDuration
number300

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
boolfalse

When true, bring focus inside of the Popover on open.

children
node

The content of the Popover.