The Popover component shows 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.
The Popover uses the
Positioner from Evergreen to handle the positioning logic.
Internally the Popover will make sure it is positioned within the viewport.
This means that sometimes the Popover flips — or it might move slightly to the left or right.
content, by setting the content prop, and
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.
When opening the Popover when
bringFocusInside is true, focus will be brought inside the Popover component by looking
for elements with
[tabindex] second and
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.
The Popover can be positioned on the following positions using the