### File

`packages/components/eui-popover/eui-popover.component.ts`

### Description

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.

### Basic usage

Example :

    @ViewChild('popover') popover: EuiPopoverComponent;
    @ViewChild('trigger') trigger: ElementRef;

    openPopover() {
      this.popover.openPopover(this.trigger);
    }

Example :

    <button #trigger (click)="openPopover()">Open</button>
    <eui-popover #popover title="Popover Title">
      <p>Popover content goes here</p>
    </eui-popover>

### With positioning

Example :

    <eui-popover position="top" [width]="'300px'">
      Content
    </eui-popover>

### With backdrop

Example :

    <eui-popover [hasBackDrop]="true" [isDismissable]="true">
      Content
    </eui-popover>

### Accessibility

- Escape key closes the popover when focused
- Focus trap keeps keyboard navigation within popover when open
- Close button provides clear dismissal option
- Backdrop click dismissal when `isDismissable` is true

### Notes

- Popover automatically repositions if preferred position doesn't fit viewport
- Use `hasNoContentPadding` to remove default content padding for custom layouts
- Listen to `popoverOpen` and `popoverClose` events for state management
- Popover closes automatically when origin element scrolls out of view

### Implements

`AfterViewInit` `OnDestroy` `OnInit` `OnChanges`

### Metadata

changeDetection | `ChangeDetectionStrategy.OnPush`
encapsulation | `ViewEncapsulation.None`
HostDirectives | `BaseStatesDirective` Inputs : euiSizeS euiSizeM euiSizeL euiSizeXL euiSize2XL euiSizeAuto euiSizeVariant
selector | `eui-popover`
imports | `NgTemplateOutlet` `OverlayModule` `A11yModule` `ObserversModule` `EuiPopoverArrowPositionDirective` `CdkTrapFocus` `EUI_ICON_BUTTON`
styleUrls | `./styles/_index.scss`
templateUrl | `./eui-popover.component.html`

### Index

###### Properties
Public position$ templatePortalContent
###### Methods
Public closePopover Public onContentChange Public onKeyDown Public openPopover
###### Inputs
hasBackDrop hasCloseButton hasNoContentPadding isDismissable position title width
###### Outputs
outsideClick popoverClose popoverOpen
###### Accessors
isOpen

### Inputs

hasBackDrop
Type : `boolean`
Default value : `false`
Whether to show a semi-transparent backdrop behind the popover. When true, creates a visual overlay that dims the rest of the UI.

hasCloseButton
Type : `boolean`
Default value : `true`
Whether to show a close button in the top-right corner of the popover. When clicked, the close button will dismiss the popover.

hasNoContentPadding
Type : `boolean`
Default value : `false`
If the content of the popover should receive a default padding

isDismissable
Type : `boolean`
Default value : `true`
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
Type : `EuiPopoverPosition`
Default value : `'bottom'`
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
Type : `string`
Optional title text to display in the popover header. When provided, adds a title element at the top of the popover content.

width
Type : `string`
Default value : `null`
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.

### Outputs

outsideClick
Type : `EventEmitter`
Event emitted when a click occurs outside the popover boundaries. Only emitted when isDismissable is true.

popoverClose
Type : `EventEmitter`
Event emitted when the popover is closed. Fires after the popover content has been removed from the DOM.

popoverOpen
Type : `EventEmitter`
Event emitted when the popover is opened. Fires after the popover content has been attached to the DOM and positioned.

### Methods

Public closePopover
`closePopover()`
Closes the popover. Cleans up subscriptions, disposes the overlay, and emits the popoverClose event. Returns : `void`

Public onContentChange
`onContentChange()`
Updates the position strategy when content changes. Recalculates and updates the overlay position to handle content size changes. Returns : `void`

Public onKeyDown
`onKeyDown(event: KeyboardEvent)`
Handles keyboard events to allow closing the popover with the Escape key. Can be used as an alternative to the close button or when hasCloseButton is false. Parameters :
Name | Type | Optional | Description
event | `KeyboardEvent` | No | The keyboard event
Returns : `void`

Public openPopover
`openPopover(origin: ElementRef)`
Opens the popover relative to the provided origin element. Sets up scroll monitoring, position strategy, and attaches the popover content to the overlay. Emits the popoverOpen event when complete. Parameters :
Name | Type | Optional | Description
origin | `ElementRef` | No | Reference to the element that triggers the popover
Returns : `void`

### Properties

Public position$
Type : `Observable<unknown>`

templatePortalContent
Type : `TemplateRef<unknown>`
Decorators : `@ViewChild('templatePortalContent')`

### Accessors

isOpen
get `isOpen()`
Whether the eui-popover is open. Example :
    <eui-popover #popover>
        @if (popover.isOpen) {
             <my-component></my-component>
        }
    </eui-popover>
Returns : `boolean`

# results matching ""

# No results matching ""