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​

headerText​

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

placement​

DescriptionDetermines on which side the component is placed at.
Type"Start" | "End" | "Top" | "Bottom"
Default"End"

horizontalAlign​

DescriptionDetermines the horizontal alignment of the component.
Type"Center" | "Start" | "End" | "Stretch"
Default"Center"

verticalAlign​

DescriptionDetermines the vertical alignment of the component.
Type"Center" | "Top" | "Bottom" | "Stretch"
Default"Center"
DescriptionDefines whether the component should close when clicking/tapping outside of the popover. If enabled, it blocks any interaction with the background.
Typeboolean
Defaultfalse

hideArrow​

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

allowTargetOverlap​

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

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 | undefined
Defaultundefined
Since1.2.0

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

preventFocusRestore​

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

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"None" | "Dialog" | "AlertDialog"
Default"Dialog"
Since1.10.0

preventInitialFocus​

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

open​

DescriptionIndicates if the element is open
Typeboolean
Defaultfalse
Since1.2.0

Slots​

DescriptionDefines the header HTML Element.
TypeArray<HTMLElement>
DescriptionDefines the footer HTML Element.
TypeArray<HTMLElement>

default​

DescriptionDefines the content of the Popup.
TypeArray<HTMLElement>

Events​

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()

open​

DescriptionFired after the component is opened.
TypeCustomEvent
BubblesNo
CancelableNo

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()

close​

DescriptionFired after the component is closed.
TypeCustomEvent
BubblesNo
CancelableNo

Methods​

applyFocus​

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

CSS Parts​

NameDescription
headerUsed to style the header of the component
contentUsed to style the content of the component
footerUsed to style the footer of the 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.