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.

Popovers have three accessibility requirements:

• Popover triggers must be anchored to elements that accept keyboard focus.
• Popovers can contain interactive elements. They must be controlled by a click handler.
• Popovers must not be activated by hover or focus events.

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.

Loading...

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.

Loading...

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.

Loading...

Popover padding sizes

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

Loading...

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"

Loading...

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.

Loading...

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.

Loading...

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.

Loading...

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.

Accessibility recommendation

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.

Loading...

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'.

Loading...

Removing the focus trap

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

Accessibility warning

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

Loading...

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.

Loading...

Props

EuiPopover

Extends HTMLAttributes

𐘂𐘂

✄𐘗✄𐘗

Prop ↦	Description and type ↦	Default value ↵
Prop button# ↦	Description and type Triggering element for which to align the popover to Type: NonNullable<ReactNode> ↦	Default value Required ↵
Prop closePopover# ↦	Description and type Callback to handle hiding of the popover Type: NoArgCallback<void> ↦	Default value Required ↵
Prop anchorPosition# ↦	Description and type Alignment of the popover and arrow relative to the button Type: "upCenter" | "upLeft" | "upRight" | "downCenter" | "downLeft" | "downRight" | "leftCenter" | "leftUp" | "leftDown" | "rightCenter" | "rightUp" | "rightDown" ↦	Default value downCenter ↵
Prop attachToAnchor# ↦	Description and type Style and position alteration for arrow-less attachment. Intended for use with inputs as anchors, e.g. EuiInputPopover Type: boolean ↦	Default value ↵
Prop container# ↦	Description and type Restrict the popover's position within this element Type: HTMLElement ↦	Default value ↵
Prop display# ↦	Description and type CSS display type for both the popover and anchor Type: Display ↦	Default value inline-block ↵
Prop focusTrapProps# ↦	Description and type Object of props passed to EuiFocusTrap Type: Partial<EuiFocusTrapProps> ↦	Default value ↵
Prop hasArrow# ↦	Description and type Show arrow indicating to originating button Type: boolean ↦	Default value true ↵
Prop initialFocus# ↦	Description and type Specifies what element should initially have focus; Can be a DOM node, or a selector string (which will be passed to document.querySelector() to find the DOM node), or a function that returns a DOM node. If not passed, initial focus defaults to the popover panel. Type: ElementTarget ↦	Default value ↵
Prop insert# ↦	Description and type Passed directly to EuiPortal for DOM positioning. Both properties are required if prop is specified Type: { sibling: HTMLElement; position: "before" | "after"; } ↦	Default value ↵
Prop isOpen# ↦	Description and type Visibility state of the popover Type: boolean ↦	Default value false ↵
Prop ownFocus# ↦	Description and type Traps tab focus within the popover contents Type: boolean ↦	Default value true ↵
Prop panelClassName# ↦	Description and type Custom class added to the EuiPanel containing the popover contents Type: string ↦	Default value ↵
Prop panelPaddingSize# ↦	Description and type EuiPanel padding on all sides Type: "xs" | "s" | "m" | "l" | "xl" | "none" ↦	Default value m ↵
Prop panelStyle# ↦	Description and type Standard DOM style attribute. Passed to the EuiPanel Type: CSSProperties ↦	Default value ↵
Prop panelProps# ↦	Description and type Object of props passed to EuiPanel. See #EuiPopoverPanelProps Type: Omit<_EuiPanelDivlike, "style" | "color" | "hasBorder" | "hasShadow"> ↦	Default value ↵
Prop panelRef# ↦	Description and type Type: RefCallback<HTMLElement> ↦	Default value ↵
Prop popoverScreenReaderText# ↦	Description and type Optional screen reader instructions to announce upon popover open, in addition to EUI's default popover instructions for Escape on close. Useful for popovers that may have additional keyboard capabilities such as arrow navigation. Type: ReactNode ↦	Default value ↵
Prop popoverRef# ↦	Description and type Type: Ref<HTMLDivElement> ↦	Default value ↵
Prop repositionOnScroll# ↦	Description and type When true, the popover's position is re-calculated when the user scrolls, this supports having fixed-position popover anchors. When nesting an EuiPopover in a scrollable container, repositionOnScroll should be true Type: boolean ↦	Default value ↵
Prop repositionToCrossAxis# ↦	Description and type By default, popovers will attempt to position themselves along the initial axis specified. If there is not enough room either vertically or horizontally however, the popover will attempt to reposition itself along the secondary cross axis if there is room there instead. If you do not not want this repositioning to occur (and it is acceptable for the popover to appear offscreen), set this to false to disable this behavior. Type: boolean ↦	Default value true ↵
Prop zIndex# ↦	Description and type By default, popover content inherits the z-index of the anchor component; pass zIndex to override Type: number ↦	Default value ↵
Prop offset# ↦	Description and type Distance away from the anchor that the popover will render Type: number ↦	Default value ↵
Prop buffer# ↦	Description and type Minimum distance between the popover and the bounding container; Pass an array of 4 values to adjust each side differently: [top, right, bottom, left] Type: number | [number, number, number, number] ↦	Default value 16 ↵
Prop arrowChildren# ↦	Description and type Element to pass as the child element of the arrow; Use case is typically limited to an accompanying EuiBeacon Type: ReactNode ↦	Default value ↵
Prop aria-label# ↦	Description and type Provide a name to the popover panel Defines a string value that labels the current element. @see aria-labelledby. Type: string ↦	Default value ↵
Prop aria-labelledby# ↦	Description and type Alternative option to aria-label that takes an id. Usually takes the id of the popover title Identifies the element (or elements) that labels the current element. @see aria-describedby. Type: string ↦	Default value ↵
Prop onPositionChange# ↦	Description and type Function callback for when the popover positon changes Type: (position: EuiPopoverPosition) => void ↦	Default value ↵
Prop className# ↦	Description and type Type: string ↦	Default value ↵
Prop data-test-subj# ↦	Description and type Type: string ↦	Default value ↵
Prop css# ↦	Description and type Type: Interpolation<Theme> ↦	Default value ↵

𐘂𐘂

EuiPopoverTitle

Extends HTMLAttributes

𐘂𐘂

✄𐘗✄𐘗

Prop ↦	Description and type ↦	Default value ↵
Prop className# ↦	Description and type Type: string ↦	Default value ↵
Prop aria-label# ↦	Description and type Defines a string value that labels the current element. @see aria-labelledby. Type: string ↦	Default value ↵
Prop data-test-subj# ↦	Description and type Type: string ↦	Default value ↵
Prop css# ↦	Description and type Type: Interpolation<Theme> ↦	Default value ↵
Prop paddingSize# ↦	Description and type Customize the all around padding of the popover title. Leave undefined to inherit from the panelPaddingSize of the containing EuiPopover Type: "xs" | "s" | "m" | "l" | "xl" | "none" ↦	Default value ↵

𐘂𐘂

EuiPopoverFooter

Extends HTMLAttributes

𐘂𐘂

✄𐘗✄𐘗

Prop ↦	Description and type ↦	Default value ↵
Prop className# ↦	Description and type Type: string ↦	Default value ↵
Prop aria-label# ↦	Description and type Defines a string value that labels the current element. @see aria-labelledby. Type: string ↦	Default value ↵
Prop data-test-subj# ↦	Description and type Type: string ↦	Default value ↵
Prop css# ↦	Description and type Type: Interpolation<Theme> ↦	Default value ↵
Prop paddingSize# ↦	Description and type Customize the all around padding of the popover footer. Leave undefined to inherit from the panelPaddingSize of the containing EuiPopover Type: "xs" | "s" | "m" | "l" | "xl" | "none" ↦	Default value ↵

𐘂𐘂

EuiInputPopover

Extends HTMLAttributes

𐘂𐘂

✄𐘗✄𐘗

Prop ↦	Description and type ↦	Default value ↵
Prop input# ↦	Description and type Type: NonNullable<ReactNode> ↦	Default value Required ↵
Prop closePopover# ↦	Description and type Callback to handle hiding of the popover Type: NoArgCallback<void> ↦	Default value Required ↵
Prop className# ↦	Description and type Type: string ↦	Default value ↵
Prop aria-label# ↦	Description and type Defines a string value that labels the current element. Provide a name to the popover panel @see aria-labelledby. Type: string ↦	Default value ↵
Prop data-test-subj# ↦	Description and type Type: string ↦	Default value ↵
Prop css# ↦	Description and type Type: Interpolation<Theme> ↦	Default value ↵
Prop anchorPosition# ↦	Description and type Alignment of the popover relative to the input Type: "downCenter" | "downLeft" | "downRight" ↦	Default value downLeft ↵
Prop disableFocusTrap# ↦	Description and type Type: boolean ↦	Default value false ↵
Prop closeOnScroll# ↦	Description and type Allows automatically closing the input popover on page scroll Type: boolean ↦	Default value false ↵
Prop fullWidth# ↦	Description and type Type: boolean ↦	Default value false ↵
Prop inputRef# ↦	Description and type Type: Ref<HTMLDivElement> ↦	Default value ↵
Prop onPanelResize# ↦	Description and type Type: (width: number) => void ↦	Default value ↵
Prop panelMinWidth# ↦	Description and type By default, EuiInputPopovers inherit the same width as the passed input element. However, if the input width is too small, you can pass a minimum panel width (that should be based on the popover content). Type: number ↦	Default value 0 ↵
Prop zIndex# ↦	Description and type By default, popover content inherits the z-index of the anchor component; pass zIndex to override Type: number ↦	Default value ↵
Prop container# ↦	Description and type Restrict the popover's position within this element Type: HTMLElement ↦	Default value ↵
Prop display# ↦	Description and type CSS display type for both the popover and anchor Type: Display ↦	Default value block ↵
Prop offset# ↦	Description and type Distance away from the anchor that the popover will render Type: number ↦	Default value ↵
Prop panelRef# ↦	Description and type Type: RefCallback<HTMLElement> ↦	Default value ↵
Prop ownFocus# ↦	Description and type Traps tab focus within the popover contents Type: boolean ↦	Default value false ↵
Prop focusTrapProps# ↦	Description and type Object of props passed to EuiFocusTrap Type: Partial<EuiFocusTrapProps> ↦	Default value ↵
Prop isOpen# ↦	Description and type Visibility state of the popover Type: boolean ↦	Default value ↵
Prop repositionOnScroll# ↦	Description and type When true, the popover's position is re-calculated when the user scrolls, this supports having fixed-position popover anchors. When nesting an EuiPopover in a scrollable container, repositionOnScroll should be true Type: boolean ↦	Default value ↵
Prop attachToAnchor# ↦	Description and type Style and position alteration for arrow-less attachment. Intended for use with inputs as anchors, e.g. EuiInputPopover Type: boolean ↦	Default value true ↵
Prop hasArrow# ↦	Description and type Show arrow indicating to originating button Type: boolean ↦	Default value ↵
Prop initialFocus# ↦	Description and type Specifies what element should initially have focus; Can be a DOM node, or a selector string (which will be passed to document.querySelector() to find the DOM node), or a function that returns a DOM node. If not passed, initial focus defaults to the popover panel. Type: ElementTarget ↦	Default value ↵
Prop insert# ↦	Description and type Passed directly to EuiPortal for DOM positioning. Both properties are required if prop is specified Type: { sibling: HTMLElement; position: "before" | "after"; } ↦	Default value ↵
Prop panelClassName# ↦	Description and type Custom class added to the EuiPanel containing the popover contents Type: string ↦	Default value ↵
Prop panelPaddingSize# ↦	Description and type EuiPanel padding on all sides Type: "xs" | "s" | "m" | "l" | "xl" | "none" ↦	Default value s ↵
Prop panelStyle# ↦	Description and type Standard DOM style attribute. Passed to the EuiPanel Type: CSSProperties ↦	Default value ↵
Prop panelProps# ↦	Description and type Object of props passed to EuiPanel. See #EuiPopoverPanelProps Type: Omit<_EuiPanelDivlike, "style" | "color" | "hasBorder" | "hasShadow"> ↦	Default value ↵
Prop popoverScreenReaderText# ↦	Description and type Optional screen reader instructions to announce upon popover open, in addition to EUI's default popover instructions for Escape on close. Useful for popovers that may have additional keyboard capabilities such as arrow navigation. Type: ReactNode ↦	Default value ↵
Prop popoverRef# ↦	Description and type Type: Ref<HTMLDivElement> ↦	Default value ↵
Prop repositionToCrossAxis# ↦	Description and type By default, popovers will attempt to position themselves along the initial axis specified. If there is not enough room either vertically or horizontally however, the popover will attempt to reposition itself along the secondary cross axis if there is room there instead. If you do not not want this repositioning to occur (and it is acceptable for the popover to appear offscreen), set this to false to disable this behavior. Type: boolean ↦	Default value false ↵
Prop buffer# ↦	Description and type Minimum distance between the popover and the bounding container; Pass an array of 4 values to adjust each side differently: [top, right, bottom, left] Type: number | [number, number, number, number] ↦	Default value 16 ↵
Prop arrowChildren# ↦	Description and type Element to pass as the child element of the arrow; Use case is typically limited to an accompanying EuiBeacon Type: ReactNode ↦	Default value ↵
Prop onPositionChange# ↦	Description and type Function callback for when the popover positon changes Type: (position: EuiPopoverPosition) => void ↦	Default value ↵

𐘂𐘂

EuiWrappingPopover

Extends HTMLAttributes

𐘂𐘂

✄𐘗✄𐘗

Prop ↦	Description and type ↦	Default value ↵
Prop button# ↦	Description and type Type: HTMLElement ↦	Default value Required ↵
Prop closePopover# ↦	Description and type Callback to handle hiding of the popover Type: NoArgCallback<void> ↦	Default value Required ↵
Prop zIndex# ↦	Description and type By default, popover content inherits the z-index of the anchor component; pass zIndex to override Type: number ↦	Default value ↵
Prop className# ↦	Description and type Type: string ↦	Default value ↵
Prop css# ↦	Description and type Type: Interpolation<Theme> ↦	Default value ↵
Prop aria-label# ↦	Description and type Provide a name to the popover panel Defines a string value that labels the current element. @see aria-labelledby. Type: string ↦	Default value ↵
Prop data-test-subj# ↦	Description and type Type: string ↦	Default value ↵
Prop aria-labelledby# ↦	Description and type Alternative option to aria-label that takes an id. Usually takes the id of the popover title Identifies the element (or elements) that labels the current element. @see aria-describedby. Type: string ↦	Default value ↵
Prop container# ↦	Description and type Restrict the popover's position within this element Type: HTMLElement ↦	Default value ↵
Prop display# ↦	Description and type CSS display type for both the popover and anchor Type: Display ↦	Default value ↵
Prop offset# ↦	Description and type Distance away from the anchor that the popover will render Type: number ↦	Default value ↵
Prop panelRef# ↦	Description and type Type: RefCallback<HTMLElement> ↦	Default value ↵
Prop ownFocus# ↦	Description and type Traps tab focus within the popover contents Type: boolean ↦	Default value ↵
Prop focusTrapProps# ↦	Description and type Object of props passed to EuiFocusTrap Type: Partial<EuiFocusTrapProps> ↦	Default value ↵
Prop isOpen# ↦	Description and type Visibility state of the popover Type: boolean ↦	Default value ↵
Prop repositionOnScroll# ↦	Description and type When true, the popover's position is re-calculated when the user scrolls, this supports having fixed-position popover anchors. When nesting an EuiPopover in a scrollable container, repositionOnScroll should be true Type: boolean ↦	Default value ↵
Prop anchorPosition# ↦	Description and type Alignment of the popover and arrow relative to the button Type: "upCenter" | "upLeft" | "upRight" | "downCenter" | "downLeft" | "downRight" | "leftCenter" | "leftUp" | "leftDown" | "rightCenter" | "rightUp" | "rightDown" ↦	Default value ↵
Prop attachToAnchor# ↦	Description and type Style and position alteration for arrow-less attachment. Intended for use with inputs as anchors, e.g. EuiInputPopover Type: boolean ↦	Default value ↵
Prop hasArrow# ↦	Description and type Show arrow indicating to originating button Type: boolean ↦	Default value ↵
Prop initialFocus# ↦	Description and type Specifies what element should initially have focus; Can be a DOM node, or a selector string (which will be passed to document.querySelector() to find the DOM node), or a function that returns a DOM node. If not passed, initial focus defaults to the popover panel. Type: ElementTarget ↦	Default value ↵
Prop insert# ↦	Description and type Passed directly to EuiPortal for DOM positioning. Both properties are required if prop is specified Type: { sibling: HTMLElement; position: "before" | "after"; } ↦	Default value ↵
Prop panelClassName# ↦	Description and type Custom class added to the EuiPanel containing the popover contents Type: string ↦	Default value ↵
Prop panelPaddingSize# ↦	Description and type EuiPanel padding on all sides Type: "xs" | "s" | "m" | "l" | "xl" | "none" ↦	Default value ↵
Prop panelStyle# ↦	Description and type Standard DOM style attribute. Passed to the EuiPanel Type: CSSProperties ↦	Default value ↵
Prop panelProps# ↦	Description and type Object of props passed to EuiPanel. See #EuiPopoverPanelProps Type: Omit<_EuiPanelDivlike, "style" | "color" | "hasBorder" | "hasShadow"> ↦	Default value ↵
Prop popoverScreenReaderText# ↦	Description and type Optional screen reader instructions to announce upon popover open, in addition to EUI's default popover instructions for Escape on close. Useful for popovers that may have additional keyboard capabilities such as arrow navigation. Type: ReactNode ↦	Default value ↵
Prop popoverRef# ↦	Description and type Type: Ref<HTMLDivElement> ↦	Default value ↵
Prop repositionToCrossAxis# ↦	Description and type By default, popovers will attempt to position themselves along the initial axis specified. If there is not enough room either vertically or horizontally however, the popover will attempt to reposition itself along the secondary cross axis if there is room there instead. If you do not not want this repositioning to occur (and it is acceptable for the popover to appear offscreen), set this to false to disable this behavior. Type: boolean ↦	Default value true ↵
Prop buffer# ↦	Description and type Minimum distance between the popover and the bounding container; Pass an array of 4 values to adjust each side differently: [top, right, bottom, left] Type: number | [number, number, number, number] ↦	Default value 16 ↵
Prop arrowChildren# ↦	Description and type Element to pass as the child element of the arrow; Use case is typically limited to an accompanying EuiBeacon Type: ReactNode ↦	Default value ↵
Prop onPositionChange# ↦	Description and type Function callback for when the popover positon changes Type: (position: EuiPopoverPosition) => void ↦	Default value ↵

𐘂𐘂