Skip to main content

Popover

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";

**Note: ** We recommend placing popup-like components (ui5-dialog and ui5-popover) outside any other components. Preferably, the popup-like components should be placed in an upper level HTML element. Otherwise, in some cases the parent HTML elements can break the position and/or z-index management of the popup-like components.

Note: We don't recommend nesting popup-like components (ui5-dialog, ui5-popover).

Basic Sample​

Properties​

headerText​

DescriptionDefines the header text.
Note: If header slot is provided, the headerText is ignored.
Typestring
Default""

placementType​

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

horizontalAlign​

DescriptionDetermines the horizontal alignment of the component.
Type"Center" | "Left" | "Right" | "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

hideBackdrop​

DescriptionDefines whether the block layer will be shown if modal property is set to true.
Typeboolean
Defaultfalse
Since1.0.0-rc.10

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 that the popover is shown at
TypeHTMLElement | string | undefined
Defaultundefined
Since1.2.0

initialFocus​

DescriptionDefines the ID of the HTML Element, which will get the initial focus.
Typestring
Default""

preventFocusRestore​

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

open​

DescriptionIndicates if the element is open
Typeboolean
Defaultfalse
Since1.2.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
Default""
Since1.1.0

accessibleRole​

DescriptionAllows setting a custom role.
Type"None" | "Dialog" | "AlertDialog"
Default"Dialog"
Since1.10.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. This event does not bubble.
TypeCustomEvent

after-open​

DescriptionFired after the component is opened. This event does not bubble.
TypeCustomEvent

before-close​

DescriptionFired before the component is closed. This event can be cancelled, which will prevent the popup from closing. This event does not bubble.
TypeCustomEvent<PopupBeforeCloseEventDetail>
ParametersescPressed: boolean
Indicates that ESC key has triggered the event.

after-close​

DescriptionFired after the component is closed. This event does not bubble.
TypeCustomEvent

Methods​

showAt​

DescriptionShows the popover.
Return typePromise<void>
Parametersopener: HTMLElement
the element that the popover is shown at
preventInitialFocus: boolean
prevents applying the focus inside the popover

applyFocus​

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

isOpen​

DescriptionTells if the component is opened
Return typeboolean

close​

DescriptionCloses the popup.
Return typevoid

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.