Popovers are used to show a small piece of rich or related data for a specific element on the screen. They render alongside a given target element where the position is determined by the placement prop. They are not meant to handle massive Forms or screen flows, but do allow a few small form fields for contextual editing, data visualizations, or imagery to help users work with and understand context futher. Popovers can stack on top of other Popovers and Modals, provided they are launched from that Popover or Modal. Popovers are not to be confused with Tooltips, which mimic HTML’s ‘title’ attribute, and are text-only content.

On hover

In this example, the Popover target element is a Text component that sets mouse in and out events to toggle the Popover.

On click

In this example, the Popover target element is a Button component that sets click events to toggle the Popover.

The Popover component offers support for delays upon showing or hiding. For each delay, a value of short, long, or none may be passed.

By default, multiple Popovers are allowed to appear on the screen at any given time. However, if you would like to enforce a set of Popovers that will only ever have one member active at a time, pass the same groupId to those Popovers. Popovers with the same groupId manage themselves so that only one Popover is ever open within that group.