# EuiPopoverComponent

**Type:** component



A flexible popover component that displays content in an overlay positioned relative to an origin element.

The popover can be positioned at four different positions (top, right, bottom, left) relative to the
origin element, with automatic fallback positions if the preferred position doesn't fit in the viewport.
It supports various visual styles, dismissal behaviors, and size variants.


**Selector:** `eui-popover`

## Inputs
- **hasBackDrop**: `boolean` - Whether to show a semi-transparent backdrop behind the popover. When true, creates a visual overlay that dims the rest of the UI.
- **hasCloseButton**: `boolean` - Whether to show a close button in the top-right corner of the popover. When clicked, the close button will dismiss the popover.
- **isDismissable**: `boolean` - Whether the popover can be dismissed by clicking outside its boundaries. When false, the popover will remain open until explicitly closed via code or by clicking the close button (if available).
- **position**: `EuiPopoverPosition` - Determines the preferred placement of the popover relative to its origin element. The component will attempt to use this position first, falling back to alternatives if there's not enough space in the viewport.
- **title**: `string` - Optional title text to display in the popover header. When provided, adds a title element at the top of the popover content.
- **type**: `"default" | "flat" | "colored-header" | "colored-solid"` - Visual styling variant for the popover. - 'default': Standard popover with subtle border and drop shadow - 'flat': Popover without shadows, using only border for definition - 'colored-header': Popover with an accent-colored header area - 'colored-solid': Popover with accent color applied to the entire component
- **width**: `string` - Custom width for the popover. Can be specified in any valid CSS unit (px, %, em, etc). When null, the popover width is determined by its content.
- **euiSizeS**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiSizeM**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiSizeL**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiSizeXL**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiSize2XL**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiSizeAuto**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiSizeVariant**: `any` - From host directive: #[[file:BaseStatesDirective.md]]

## Outputs
- **outsideClick**: `EventEmitter` - Event emitted when a click occurs outside the popover boundaries. Only emitted when isDismissable is true.
- **popoverClose**: `EventEmitter` - Event emitted when the popover is closed. Fires after the popover content has been removed from the DOM.
- **popoverOpen**: `EventEmitter` - Event emitted when the popover is opened. Fires after the popover content has been attached to the DOM and positioned.
