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​
Download Open in Playground Edit
Properties​
Description Defines the header text.Note: If header
slot is provided, the headerText
is ignored. Type string
Default ""
placementType​
Description Determines on which side the component is placed at. Type "Left" | "Right" | "Top" | "Bottom"
Default "Right"
horizontalAlign​
Description Determines the horizontal alignment of the component. Type "Center" | "Left" | "Right" | "Stretch"
Default "Center"
verticalAlign​
Description Determines the vertical alignment of the component. Type "Center" | "Top" | "Bottom" | "Stretch"
Default "Center"
Description Defines whether the component should close when clicking/tapping outside of the popover. If enabled, it blocks any interaction with the background. Type boolean
Default false
hideBackdrop​
Description Defines whether the block layer will be shown if modal property is set to true. Type boolean
Default false Since 1.0.0-rc.10
hideArrow​
Description Determines whether the component arrow is hidden. Type boolean
Default false Since 1.0.0-rc.15
allowTargetOverlap​
Description Determines if there is no enough space, the component can be placed over the target. Type boolean
Default false
Description Defines the ID or DOM Reference of the element that the popover is shown at Type HTMLElement | string | undefined
Default undefined Since 1.2.0
initialFocus​
Description Defines the ID of the HTML Element, which will get the initial focus. Type string
Default ""
preventFocusRestore​
Description Defines if the focus should be returned to the previously focused element, when the popup closes. Type boolean
Default false Since 1.0.0-rc.8
Description Indicates if the element is open Type boolean
Default false Since 1.2.0
accessibleName​
Description Defines the accessible name of the component. Type string | undefined
Default undefined Since 1.0.0-rc.15
accessibleNameRef​
Description Defines the IDs of the elements that label the component. Type string
Default "" Since 1.1.0
accessibleRole​
Description Allows setting a custom role. Type "None" | "Dialog" | "AlertDialog"
Default "Dialog" Since 1.10.0
Description Defines the header HTML Element. Type Array<HTMLElement>
Description Defines the footer HTML Element. Type Array<HTMLElement>
default​
Description Defines the content of the Popup. Type Array<HTMLElement>
before-open​
Description Fired before the component is opened. This event can be cancelled, which will prevent the popup from opening. This event does not bubble. Type CustomEvent
after-open​
Description Fired after the component is opened. This event does not bubble. Type CustomEvent
before-close​
Description Fired before the component is closed. This event can be cancelled, which will prevent the popup from closing. This event does not bubble. Type CustomEvent<PopupBeforeCloseEventDetail>
Parameters escPressed : boolean
Indicates that ESC
key has triggered the event.
after-close​
Description Fired after the component is closed. This event does not bubble. Type CustomEvent
Methods​
Description Shows the popover. Return type Promise<void>
Parameters opener : HTMLElement
the element that the popover is shown atpreventInitialFocus : boolean
prevents applying the focus inside the popover
applyFocus​
Description Focuses the element denoted by initialFocus
, if provided, or the first focusable element otherwise. Return type Promise<void>
Description Tells if the component is opened Return type boolean
Description Closes the popup. Return type void
CSS Parts​
Name Description header Used to style the header of the component content Used to style the content of the component footer Used 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.
Download Open in Playground Edit