Popover

Introduction to using the Popover component

Popover popup, usually used to present auxiliary information, for example when there isn't enough space on the screen but you still need to show a lot of explanatory text, you can use this component. When displayed it floats above the screen, covering part of the original webpage.

Using a Popover gives the user more freedom; if you want the user to focus more on the popup context, it is recommended to use the Dialog component.

Basic usage

<bpa-popover>content</bpa-popover>

Size

<bpa-popover size="small">small</bpa-popover>

Theme color

<bpa-popover theme="primary">primary</bpa-popover>

No padding

<bpa-popover nopadding>content</bpa-popover>

Title

<bpa-popover title="title">content</bpa-popover>

<bpa-popover>
  <template v-slot:title>
    <mark>title</mark>
  </template>
  content
</bpa-popover>

Attributes

Name	Value	Type	Default	Required	Note
id		String	random
theme	primary, success, warning, danger, primary-ghost, success-ghost, warning-ghost, danger-ghost	String
title		String	'Popover'
nopadding		Boolean
size	small, large	String
disabled		String, Boolean

Demo