Popover

---

Use the EuiPopover component to hide controls or options behind a clickable element. A popover is temporary so keep tasks simple and narrowly focused.

While the visibility of the popover is maintained by the consuming application, popovers will automatically close when clicking outside of the popover bounds. Therefore all work done in a popover should automatically be saved.

Avoid popover inception (popover triggering another popover), and instead use a EuiContextMenu to swap the popover panel content.

Anchor position

The alignment and arrow on your popover can be set with the anchorPosition prop. These positions will update based upon screen real estate.

Some tips:

• The first word in the anchorPosition denotes where the popover will appear relative to the button.
• The second word in the anchorPosition denotes where the gravity / pin position will appear relative to the popover.

Popover titles and footers

Popovers often need titling. Use the EuiPopoverTitle component nested somewhere inside the popover contents.

You can also add a similarly styled EuiPopoverFooter for smaller captions or call to action buttons.

Popover padding sizes

Use the panelPaddingSize prop to adjust the padding of the panel content. When using popover titles and footers, this setting will propogate to them. Or you can supply a custom paddingSize to either the EuiPopoverTitle of EuiPopoverFooter.

Panel class name

Use the panelClassName prop to pass a custom class to the panel containing the popover contents.

Popover with block level display

Popover anchors default to display: inline-block; so they do not force a display on inline triggers. If you do need to change this, just add display="block"

Popover on a fixed element

Popover content even works on position: fixed; elements. Add the repositionOnScroll boolean prop to ensure the popover realigns to the fixed button on scroll.

Constraining a popover inside a container

EuiPopover can accept a React or DOM element as a container prop and restrict the popover from overflowing that container.

Popover attached to input element

EuiInputPopover is a specialized popover component intended to be used with form elements. Stylistically, the popover panel is "attached" to the input. As a result, the popover will always try to set its width to match the width of the input, although this can be configured via panelMinWidth.

Functionally, consumers have control over what events open and close the popover, and it can allow for natural tab order. Although some assumptions are made about keyboard behavior, consumers should provide specific key event handlers depending on the use case. For instance, a type=text input could use the down key to trigger popover opening, but this interaction would not be appropriate for type=number inputs as they natively bind to the down key.

Setting an initial focus

If you want a specific child element of the popover to immediately gain focus when the popover is open, use the initialFocus prop to pass either a selector or DOM node.

warning

It can be jarring for keyboard and screen reader users to immediately land on an element with no other context. To alleviate this, ensure that your initial focus target makes sense alone or is the primary goal of the popover.

Custom outside click behavior

If you do not wish the popover to auto-close on outside clicks, you can use focusTrapProps to customize this behavior. The below example triggers a confirmation modal which can leave the popover open if the user presses 'No'.

Removing the focus trap

If the popover should not trap focus within itself, then you can remove it with ownFocus={false}.

warning

Removing ownFocus makes it difficult for keyboard-only and screen reader users to navigate to and from your popover.

Popover using an HTMLElement as the anchor

EuiWrappingPopover is an extra popover component that allows any existing DOM element to be passed as the button prop.