Skip to main content

Popover

<ui5-popover> | Since 1.0.0-rc.6

The ui5-popover component displays additional information for an object in a compact way and without leaving the page. The Popover can contain various UI elements, such as fields, tables, images, and charts. It can also include actions in the footer.

Structure​

The popover has three main areas:

  • Header (optional)
  • Content
  • Footer (optional)

Note: The ui5-popover is closed when the user clicks or taps outside the popover or selects an action within the popover. You can prevent this with the modal property.

ES6 Module Import​

import "@ui5/webcomponents/dist/Popover.js";

Basic Sample​

Properties​

accessibleDescription​

DescriptionDefines the accessible description of the component.
Typestring | undefined
Defaultundefined
Since2.11.0

accessibleDescriptionRef​

DescriptionReceives id(or many ids) of the elements that describe the component.
Typestring | undefined
Defaultundefined
Since2.11.0

accessibleName​

DescriptionDefines the accessible name of the component.
Typestring | undefined
Defaultundefined
Since1.0.0-rc.15

accessibleNameRef​

DescriptionDefines the IDs of the elements that label the component.
Typestring | undefined
Defaultundefined
Since1.1.0

accessibleRole​

DescriptionAllows setting a custom role.
Type"AlertDialog" | "Dialog" | "None" (value descriptions in: PopupAccessibleRole)
Default"Dialog"
Since1.10.0

allowTargetOverlap​

DescriptionDetermines if there is no enough space, the component can be placed over the target.
Typeboolean
Defaultfalse

headerText​

DescriptionDefines the header text.
Note: If header slot is provided, the headerText is ignored.
Typestring | undefined
Defaultundefined

hideArrow​

DescriptionDetermines whether the component arrow is hidden.
Typeboolean
Defaultfalse
Since1.0.0-rc.15

horizontalAlign​

DescriptionDetermines the horizontal alignment of the component.
Type"Center" | "End" | "Start" | "Stretch" (value descriptions in: PopoverHorizontalAlign)
Default"Center"

initialFocus​

DescriptionDefines the ID of the HTML Element, which will get the initial focus.
Note: If an element with autofocus attribute is added inside the component, initialFocus won't take effect.
Typestring | undefined
Defaultundefined
DescriptionDefines whether the component should close when clicking/tapping outside the popover. If enabled, it blocks any interaction with the background.
Typeboolean
Defaultfalse

open​

DescriptionIndicates if the element is open
Typeboolean
Defaultfalse
Since1.2.0

opener​

DescriptionDefines the ID or DOM Reference of the element at which the popover is shown. When using this attribute in a declarative way, you must only use the id (as a string) of the element at which you want to show the popover. You can only set the opener attribute to a DOM Reference when using JavaScript.
TypeHTMLElement | string | null | undefined
Defaultundefined
Since1.2.0

placement​

DescriptionDetermines on which side the component is placed at.
Type"Bottom" | "End" | "Start" | "Top" (value descriptions in: PopoverPlacement)
Default"End"

preventFocusRestore​

DescriptionDefines if the focus should be returned to the previously focused element, when the popup closes.
Typeboolean
Defaultfalse
Since1.0.0-rc.8

preventInitialFocus​

DescriptionIndicates whether initial focus should be prevented.
Typeboolean
Defaultfalse
Since2.0.0

resizable​

DescriptionDetermines whether the component is resizable. Note: This property is effective only on desktop devices.
Typeboolean
Defaultfalse
Since2.19.0

verticalAlign​

DescriptionDetermines the vertical alignment of the component.
Type"Bottom" | "Center" | "Stretch" | "Top" (value descriptions in: PopoverVerticalAlign)
Default"Center"

Slots​

default​

DescriptionDefines the content of the Popup.
TypeArray<HTMLElement>
DescriptionDefines the footer HTML Element.
TypeArray<HTMLElement>
DescriptionDefines the header HTML Element.
TypeArray<HTMLElement>

Events​

before-close​

DescriptionFired before the component is closed. This event can be cancelled, which will prevent the popup from closing.
TypeCustomEvent<PopupBeforeCloseEventDetail>
ParametersescPressed: boolean
Indicates that ESC key has triggered the event.
BubblesNo
CancelableYes - via preventDefault()

before-open​

DescriptionFired before the component is opened. This event can be cancelled, which will prevent the popup from opening.
TypeCustomEvent
BubblesNo
CancelableYes - via preventDefault()

close​

DescriptionFired after the component is closed.
TypeCustomEvent
BubblesNo
CancelableNo

open​

DescriptionFired after the component is opened.
TypeCustomEvent
BubblesNo
CancelableNo

Methods​

applyFocus​

DescriptionFocuses the element denoted by initialFocus, if provided, or the first focusable element otherwise.
Return typePromise<void>

CSS Parts​

For more information on how to use CSS shadow parts, see Usage of CSS Shadow Parts.

NameDescription
contentUsed to style the content of the component
footerUsed to style the footer of the component
headerUsed to style the header of the component

CSS Custom States​

No CSS custom states available for this component.

More Samples​

Placement​

You can influence the placement of the popup. Note: if there is not enough space for the popup on the defined side, it will open on the side with enough space.

Resizable​

The Resizable sample demonstrates how the Popover component can be resized by dragging its edges. This allows users to adjust the popup's width and height interactively, providing greater flexibility for content display.