Popover

BsPopover is a lightweight component which is used as a popup container.

Overview

Some components use <bs-popover> internally, such as BsDropdownMenu, BsCombobox, BsDateTimeField, BsSearchField. Example below, shows you basic usage of <bs-popover>.

Display Placement

Use placement property to change default <bs-popover> display placement. Valid placement values are: top, top-left, top-right, bottom, bottom-left, bottom-right, left, left-top, left-bottom, right, right-top, right-bottom.

API Reference

Property	Type	Default	Description
color	String	'white'	Popover background color. Any MDBootstrap Color or Material Color variants can be used. v2.0.0
cover	Boolean	false	Display Popover at a position that covers the activator.
esc-close	Boolean	true	Close the Popover when ESC key is pressed.
open v-model	Boolean	false	Popover state: show or hide.
overlay	Boolean	false	Show backdrop overlay or not.
overlay-click-close	Boolean	true	Close the Popover when the backdrop overlay is clicked. v2.0.0
overlay-color	String	'#000'	The backdrop overlay color.
overlay-opacity	Number	0.4	The backdrop overlay opacity.
placement	String	'bottom-left'	Popover display placement. Valid values are: top, top-left, top-right, bottom, bottom-left, bottom-right, left, left-top, left-bottom, right, right-top, right-bottom.
space	Number		Number of pixel to shift the Popover display position.
transition	String	'scale'	Transition animation when show the Popover. This animation is effected by placement property.
trigger required	HTMLElement/String		HTML element or element ID which is used to activate and calculate this Popover display position.

Name	Arguments	Description
close		Fired when Popover is closed.
update:open	( state:Boolean)	Used to update the open property. v2.0.0

Name	Description
default	The outlet slot used to place the main content.