BwPopover | bw-popover

Overview

Popovers are used to display content in a floating overlay.

Usage

Basic

Open Popover

Hello

<bw-popover placement="top-end">
  <bw-button slot="trigger">Open Popover</bw-button>
  <div style="padding: 12px;">
    <p>Hello</p>
  </div>
</bw-popover>

Properties

Property	Attribute	Description	Type	Default
arrow	arrow	Renders an arrow pointing to the trigger	boolean	true
arrowPadding	arrow-padding	The padding between the arrow and the edges of the popover. Useful if you change the border-radius of the popover	number	6
backdropDismiss	backdrop-dismiss	Backdrop will dismiss the popover on click when enabled	boolean	true
destroy	destroy	Execute a callback after the popover has dismissed	() => void | Promise<void>	undefined
dismissOnClick	dismiss-on-click	Popover will automatically dismiss itself when something is clicked in the popover when enabled	boolean	false
init	init	Execute a callback before the popover starts presenting	() => void | Promise<void>	undefined
matchWidth	match-width	If the popover should match the width of the trigger element	boolean	false
offsetX	offset-x	Horizontal offset used when auto positioning the popover content	number	0
offsetY	offset-y	Vertical offset used when auto positioning the popover content	number	10
open	open	Opens/closes the popover	boolean	false
placement	placement	Where the popover should be placed	"bottom" | "bottom-end" | "bottom-start" | "left" | "left-end" | "left-start" | "right" | "right-end" | "right-start" | "top" | "top-end" | "top-start"	undefined
positionStrategy	position-strategy	If the popover should position itself using the mouse event or the triggerElement.	"click" | "element"	'element'
triggerAction	trigger-action	- click: Popover will show on left click or tap on mobile. - context-menu: Popover will show on right click or press on mobile. - hover: Popover will show on hover or tap on mobile.	"click" | "context-menu" | "hover"	'click'

Events

Event	Description	Type
openChange	Emits when the popover is toggled	CustomEvent<boolean>
popoverDismiss	Emits when the popover is closed	CustomEvent<{ role?: string; data?: any; }>
popoverPresent	Emits when the popover is opened	CustomEvent<any>
ready	Emits when the popover has completed it's initial render	CustomEvent<any>

Methods

dismiss(role?: string, data?: any) => Promise<void>

Dismisses the popover

Parameters

Name	Type	Description
role	string	- The role of the element that dismissed the popover
data	any	- The data of the element that dismissed the popover

Returns

Type: Promise<void>

present() => Promise<void>

Presents the popover

Returns

Type: Promise<void>

Slots

Slot	Description
	The content of the popover
"trigger"	The trigger element of the popover

Shadow Parts

Part	Description
"arrow"	The arrow of the popover
"content"	The content of the popover
"content-container"	The container of the popover content

CSS Custom Properties

Name	Description
--background	The background color of the content container
--border	The border of the content container
--color	The text color of the content container
--padding	The padding of the content container
--radius	The radius of the content container

Dependencies

Used by

• bw-datepicker
• bw-select

Graph

---

© 2025 United Systems & Software - All Rights Reserved.