Popovers are containers for things like contextual information, menus, and related actions.
Popovers are assembled of two pieces: an overlay and a surface. Unlike Dialogs, the
Popover overlay is transparent, but it still blocks the application behind it until it is closed, with the exception of grouped Popovers. The
Popover's surface renders the content above the overlay and the rest of the application.
Placement and Arrow
Placement can be adjusted with the
placement prop. Valid positions are
bottom, each can be augmented with -
-end which places the edge of the popover at the start or end of the target.
If you want to hide the popover arrow you can set the prop
arrow prop to false.
By default Popover cancels event bubbling when a click event triggers the closure of the Popover. * This was deemed a best practice as it prevents inadveted destructive actions and mirrors behavior seen in many commonly used applications (e.g. Chrome).
However, where several related Popover components are grouped together, cancelling event bubbling for the "dismissal click" can make for an awkward UX. This functionality is used for items grouped to create a larger navigation component or associated controls such as a collection of filters.
To create a group, assigned a reference to an containing element and then assign the reference to that element to
groupedPopoversRef on each
Popover. This will override the
Popover component's usual behavior of cancelling event propagation on the clicks outside of the
Portal associated with the
Popover. The first click outside of the
Portal will still close the
Popover but click event propagation or otherwise suppressed and instead will be allowed to produce its usual behavior.
Disclosing the Trigger on Hover
Hovering in this card will show the button that triggers the popover.
PopoverContent is a simple container component that can be used to apply a consistent style to content placed within a Popover surface.
"Render Prop" style
Sometimes you may need to control how
Tooltip applies handlers to the component within it. If so you can use the render prop form of the component: