Popover

Interface of Popover
🏗 Coming Soon

Popovers are containers for things like contextual information, menus, and related actions.

Terminology

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 top, left, right and bottom, each can be augmented with -start or -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.

Grouped Popovers

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

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: