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.

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.

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.

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.

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 content even works on position: fixed; elements. Add the repositionOnScroll boolean prop to ensure the popover realigns to the fixed button on scroll.

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

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.

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.

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

Accessibility warning

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

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

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, "color" \| "style" \| "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 hasDragDrop#	Description and type Must be set to true if using `EuiDragDropContext` within a popover, otherwise your nested drag & drop will have incorrect positioning @deprecated - use `usePortal` prop on children `EuiDraggable` components instead. Type: `boolean`	Default value
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 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, "color" \| "style" \| "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 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 `false`
Prop hasDragDrop#	Description and type Must be set to true if using `EuiDragDropContext` within a popover, otherwise your nested drag & drop will have incorrect positioning @deprecated - use `usePortal` prop on children `EuiDraggable` components instead. Type: `boolean`	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 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 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, "color" \| "style" \| "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 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 hasDragDrop#	Description and type Must be set to true if using `EuiDragDropContext` within a popover, otherwise your nested drag & drop will have incorrect positioning @deprecated - use `usePortal` prop on children `EuiDraggable` components instead. Type: `boolean`	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 onPositionChange#	Description and type Function callback for when the popover positon changes Type: `(position: EuiPopoverPosition) => void`	Default value

Anchor position

Popover titles and footers

Popover padding sizes

Popover with block level display

Popover on a fixed element

Constraining a popover inside a container

Popover attached to input element

Setting an initial focus

Custom outside click behavior

Removing the focus trap

Popover using an HTMLElement as the anchor

Props

EuiPopover

EuiPopoverTitle

EuiPopoverFooter

EuiInputPopover

EuiWrappingPopover