Popover
Introduction
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.
Implementation details
The Popover
uses the Positioner
from Evergreen to handle the positioning logic.
Internally the Popover
will make sure the Popover
is positioned within the viewport.
This means that sometimes the Popover
flips — or the Popover
might move slightly to the left or right.
When creating a Popover, you must specify both:
- Its
content
, by setting the content prop, and - Its
target
, as a single child element or a function
When you pass a function to the content
prop you will be able to close the popover inside of the content.
Popovers Close On
- Outside click
- Escape key
- The close function being called (advanced)
Basic usage
Hide code
Focus management with
When opening the Popover
when bringFocusInside
is true, focus will be brought inside the Popover
by looking
for elements with [autofocus]
first, [tabindex]
second and button
last.
When passing a node as the Popover
children, the Popover
will handle focus management automatically when closing the Popover
.
When closing, it will return back focus on the target if nothing else has focus.
Hide code
Close from within content
Hide code
Positioning the Popover
The Popover can be positioned on the following positions using the position
prop:
Position.TOP
Position.TOP_LEFT
Position.TOP_RIGHT
Position.BOTTOM
Position.BOTTOM_LEFT
Position.BOTTOM_RIGHT
Position.LEFT
Position.RIGHT
Show code
Disable Close on Body Click
Hide code
Popover
Props
positionPosition.TOP | Position.TOP_LEFT | Position.TOP_RIGHT | Position.BOTTOM | Position.BOTTOM_LEFT | Position.BOTTOM_RIGHT | Position.LEFT | Position.RIGHT
isShownbool
trigger'click' | 'hover'
contentnode | func
requiredchildrenelement | func
requireddisplaystring
minWidthnumber | string
minHeightnumber | string
statelessPropsPopoverStateless.propTypes
animationDurationnumber
onOpenfunc
onClosefunc
onOpenCompletefunc
onCloseCompletefunc
onBodyClickfunc
bringFocusInsidebool
shouldCloseOnExternalClickbool