Popover

@ui5/webcomponents
<ui5-popover>

Basic Popover

Open Popover
Email:
<ui5-button id="openPopoverButton" design="Emphasized">Open Popover</ui5-button>

<ui5-popover id="hello-popover" header-text="Newsletter subscription">
	<div class="popover-content">
		<div class="flex-column">
			<ui5-label for="emailInput" required>Email: </ui5-label>
			<ui5-input id="emailInput" class="samples-margin-top" placeholder="Enter Email"></ui5-input>
		</div>
	</div>
	<div slot="footer" class="popover-footer">
		<div style="flex: 1;"></div>
		<ui5-button id="closePopoverButton" design="Emphasized">Subscribe</ui5-button>
	</div>
</ui5-popover>

<script>
	var popoverOpener = document.getElementById("openPopoverButton");
	var popover = document.getElementById("hello-popover");
	var popoverCloser = document.getElementById("closePopoverButton");

	popoverOpener.addEventListener("click", function() {
		popover.openBy(popoverOpener);
	});

	popoverCloser.addEventListener("click", function() {
		popover.close();
	});
</script>
	

Overview

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

Properties/Attributes

You can use both properties and attributes with the same effect. The name of each attribute is listed below the name of the property, if different.

Name
Type
Default Value
Description
allowTargetOverlap
allow-target-overlap
boolean
false
Determines if there is no enough space, the ui5-popover can be placed over the target.
headerText
header-text
string
""
Defines the header text.

Note: If header slot is provided, the headerText is ignored.
horizontalAlign
horizontal-align
PopoverHorizontalAlign
"Center"
Determines the horizontal alignment of the ui5-popover.

Available options are:
  • Center
  • Left
  • Right
  • Stretch
modal
boolean
false
Defines whether the ui5-popover should close when clicking/tapping outside of the popover. If enabled, it blocks any interaction with the background.
noArrow
no-arrow
boolean
false
Determines whether the ui5-popover arrow is hidden.
placementType
placement-type
PopoverPlacementType
"Right"
Determines on which side the ui5-popover is placed at.

Available options are:
  • Left
  • Right
  • Top
  • Bottom
verticalAlign
vertical-align
PopoverVerticalAlign
"Center"
Determines the vertical alignment of the ui5-popover.

Available options are:
  • Center
  • Top
  • Bottom
  • Stretch
_ariaLabel
_aria-label
undefined
Ensures ariaLabel is never null or empty string
_ariaLabelledBy
_aria-labelled-by
undefined
Return the ID of an element in the shadow DOM that is going to label this popup
_ariaModal
_aria-modal
undefined
Return the value for aria-modal for this popup
initialFocus
initial-focus
string
""
Defines the ID of the HTML Element, which will get the initial focus.
isModal
is-modal
undefined
Implement this getter with relevant logic regarding the modality of the popup (e.g. based on a public property)
preventFocusRestore
prevent-focus-restore
boolean
false
Defines if the focus should be returned to the previously focused element, when the popup closes.
since v1.0.0-rc.8

Slots

This Element provides slot(s). This means it can display its child nodes.
Unless targeting the default slot, use the slot attribute to define the destination slot for each child.
Text, along with HTML Elements with no slot attribute, goes the the default slot.

Slot
Type
Description
footer
HTMLElement [0..n]
Defines the footer HTML Element.
header
HTMLElement [0..n]
Defines the header HTML Element.
default
Node [0..n]
Defines the content of the Popup.
footer
HTMLElement [0..n]
Defines the footer HTML Element.
header
HTMLElement [0..n]
Defines the header HTML Element.

Events

This Web Component fires semantic events upon user interaction. You can bind to these events with the standard DOM APIs, such as addEventListener.

Name
Description
after-close
Fired after the component is closed. This event does not bubble.
after-open
Fired after the component is opened. This event does not bubble.
before-close
Fired before the component is closed. This event can be cancelled, which will prevent the popup from closing. This event does not bubble.
escPressed
type: Boolean
description: Indicates that ESC key has triggered the event.
before-open
Fired before the component is opened. This event can be cancelled, which will prevent the popup from opening. This event does not bubble.

Methods

This Web Component exposes public methods. You can invoke them directly on the Web Component instance.

Name
Description
openBy
Opens the popover.
opener
type: HTMLElement
description: the element that the popover is opened by
preventInitialFocus
type: boolean
description: prevents applying the focus inside the popover
Theme: Quartz Light Quartz Dark Quartz High Contrast Black Quartz High Contrast White Belize High Contrast Black High Contrast White
Content Density: Cozy Compact
Text Direction: LTR RTL
Apply Cancel