Popover

Popovers are used to show a small form or piece of related data for a specific element on the screen. They are not to be confused with Tooltips, which are text-only content with no actions within.

For more information on how to use the features and props for this component, check out the developer documentation.

The Popover component makes use the the Popper JS library. As such, this component accepts placement, modifiers, and strategy props inherited from the library.

A Popover requires a target element to be attached to when show is set to true. The Popover will typically render directly below this element visually, but elevated above all other content. If there is no room for the Popover beneath the target element, it will fall-back to other positions. This behavior can be modified by adjusting the Popper JS props. If you would like to include a small arrow pointing towards the target, pass the arrow prop.

Popovers will render adjacent to its target in the DOM by deault. This means the Popover will also inherit any styles that have cascaded from its parent elements. To change this behavior, pass the portal prop. This will render the Popover adjacent to another DOM element defined by the portalTarget on the Configuration component. By default, this is set to <body/>.

You can modify the speed at which Popovers animate in and out via the showDelay and hideDelay props. Popovers can stack on top of other Popovers and Modals, provided they are launched from that Popover or Modal.

By default, multiple Popovers are allowed to appear on the screen at any given time. However, if you would like to hide all active Popovers of a particular group when another one is active, you can assign the same groupdId to all of those Popovers. Any active Popover will automatically hide all other Popovers of the same groupId, though Popovers within different groups or without any groupdId at all will remain open.

In order to utilize this feature, you must wrap the content of the application with a <PopoverManager> component.

NameTypeDefaultDescription
children*ReactNodeThe content of the Popover.
target*
Element |VirtualElement |null 
The DOM element or virtual element that the Popover is positioned in reference to.
arrowbooleanfalse If true, an arrow will visually identify from which element the Popover is rendered.
classNamestringAdditional CSS classes.
groupIdstringThe group that the Popover belongs to. Popovers in the same group will be closed when others open.
hideDelayDelay"none" Delay on hiding the Popover.
hideOnTargetHiddenbooleanfalse If true, the Popover will be visibly hidden when its target leaves the viewport.
modifiersPopperProps['modifiers'][] React Popper Modifiers
placementPopperProps['placement']React Popper Placement
portalbooleanfalse If true, the Popover will render outside of the current DOM hierarchy in a portal.
refRef<HTMLDivElement>The ref of the wrapping element.
showbooleantrue If true, the Popover will be visible.
showDelayDelay"none" Delay on showing the Popover.
strategyPopperProps['strategy']"absolute" React Popper Strategy