Component Popover

A popover is a layer that pops up over other elements on a page.

Code

Example

Attr	Type	Default	Docs
for	string		This property is used to associate the popover with the corresponding element. The corresponding element's ID should be used as the value.
horizontal-position	"left" \| "right"	'left'	This property controls the horizontal position of the popover.
labelled-by	string		This is the DOM element ID used to label this popover. This is used for accessibility.
show	boolean	false	This boolean property is used to display or hide the popover.
vertical-position	"bottom" \| "top"	'bottom'	This property controls the vertical position of the popover.

Name	Returns	Docs
close	Promise will resolve when the close animation ends.	This method will close the popover.
hasFocus	Promise<any>	This method is emitted when the popover gets focus.
open	Promise will resolve when the open animation ends.	This method will open the popover.
updatePosition	Promise<void>	This method will update the position of the popover.

Event	Detail	Docs
popoverClosed	any	This event is triggered after popover is closed.
popoverOpened	any	This event is triggered after popover is opened.

Get in touch

Do you have an idea, or want to help us improve this page? Reach out to us via email.

Need help? Visit our Support page to learn how to get assistance, troubleshoot issues, and connect with the team.