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.

CSS Variables

As CSS technology evolves, Vue MDBootstrap introduces local CSS variables on .md-popover and global CSS variables for better customization.

Added in v2.2.0

Local CSS

.md-popover {
  --md-popover-bg: var(--background-tertiary);
  --md-popover-color: var(--foreground-tertiary);
  --md-popover-border-radius: var(--md-radius);
}

Global CSS

:root {
  --background-tertiary: #{colors.$white};
  --foreground-tertiary: #{colors.$neutral-darken-4};
  --md-radius: #{vars.$radius-md};
}

API Reference

Property	Type	Default	Description
color deprecated	String		Popover background color. Use unified global CSS variable instead. Updated in v2.2.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.