Popover

A popover-type overlay for displaying additional information, confirmation flows, etc.

Basic Usage

<template>
  <div>
    <b-popover trigger="hover" title="Title" content="This is some contentThis is some contentThis is some content">
      <b-button>Hover</b-button>
    </b-popover>
    <b-popover
      trigger="click"
      title="Title"
      content="This is some contentThis is some contentThis is some content"
      :z-index="1000"
    >
      <b-button>Click</b-button>
    </b-popover>
    <b-popover trigger="focus" title="Title" content="This is some contentThis is some contentThis is some content">
      <b-button>Focus</b-button>
    </b-popover>
  </div>
</template>

Placement

Use placement to set the popover position.

<template>
  <div class="demo-popover">
    <div class="top">
      <b-popover title="Title" content="Top Left text" placement="top-start">
        <b-button>Top Left</b-button>
        &nbsp;&nbsp;
      </b-popover>
      <b-popover title="Title" content="Top Center text" placement="top">
        <b-button>Top</b-button>
        &nbsp;&nbsp;
      </b-popover>
      <b-popover title="Title" content="Top Right text" placement="top-end">
        <b-button>Top Right</b-button>
      </b-popover>
    </div>
    <div class="center">
      <div class="center-left">
        <b-popover title="Title" content="Left Top text" placement="left-start">
          <b-button>Left Top</b-button>
        </b-popover>
        <br />
        <br />
        <b-popover title="Title" content="Left Center text" placement="left">
          <b-button>Left</b-button>
        </b-popover>
        <br />
        <br />
        <b-popover title="Title" content="Left Bottom text" placement="left-end">
          <b-button>Left Bottom</b-button>
        </b-popover>
      </div>
      <div class="center-right">
        <b-popover title="Title" content="Right Top text" placement="right-start">
          <b-button>Right Top</b-button>
        </b-popover>
        <br />
        <br />
        <b-popover title="Title" content="Right Center text" placement="right">
          <b-button>Right</b-button>
        </b-popover>
        <br />
        <br />
        <b-popover title="Title" content="Right Bottom text" placement="right-end">
          <b-button>Right Bottom</b-button>
        </b-popover>
      </div>
    </div>
    <div class="bottom">
      <b-popover title="Title" content="Bottom Left text" placement="bottom-start">
        <b-button>Bottom Left</b-button>
        &nbsp;&nbsp;
      </b-popover>
      <b-popover title="Title" content="Bottom Center text" placement="bottom">
        <b-button>Bottom</b-button>
        &nbsp;&nbsp;
      </b-popover>
      <b-popover title="Title" content="Bottom Right text" placement="bottom-end">
        <b-button>Bottom Right</b-button>
      </b-popover>
    </div>
  </div>
</template>

<style scoped>
.demo-popover {
  .top,
  .bottom {
    text-align: center;
  }
  .center {
    width: 300px;
    margin: 10px auto;
    overflow: hidden;
    .center-left {
      float: left;
    }
    .center-right {
      float: right;
    }
  }
}
</style>

Close Inside Overlay

<template>
  <b-popover v-model:visible="visible">
    <b-button type="text" @click="close">Click me to open overlay</b-button>
    <a style="margin-left: 30px">Click</a>
    <template #content>
      <b-button type="text" @click="close">Close</b-button>
    </template>
  </b-popover>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const visible = ref(false)
function close() {
  visible.value = false
}
</script>

More Content

<template>
  <div>
    <b-popover placement="top" width="200px">
      <b-button>Long text</b-button>
      <template #content>
        <div>This is a very very very very very very very very very very very long description</div>
      </template>
    </b-popover>
    <b-popover placement="right" width="300px">
      <b-button>More content</b-button>
      <template #content>
        <div>This is custom content~This is custom content~This is custom content~This is custom content~</div>
        <div>This is custom content~This is custom content~This is custom content~This is custom content~</div>
      </template>
    </b-popover>
  </div>
</template>

Confirm Popover

Enable confirm dialog mode via the confirm prop. In confirm mode, the popover only triggers via click and only displays the title content, ignoring the content slot.

<template>
  <b-popover v-model:visible="visible" :width="240">
    <b-button type="danger" plain>Confirm popover</b-button>
    <template #content>
      <p>
        <b-icon name="question-circle" size="16" color="#f5222d"></b-icon>
        Are you sure delete this item?
      </p>
      <div style="text-align: right; margin-top: 4px">
        <b-button size="mini" type="text" @click="cancel">Cancel</b-button>
        <b-button type="primary" size="mini" @click="ok">Confirm</b-button>
      </div>
    </template>
  </b-popover>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Message } from 'bin-ui-design'

const visible = ref(false)

function ok() {
  visible.value = false
  Message('Clicked [Confirm]')
}
function cancel() {
  visible.value = false
  Message('Clicked [Cancel]')
}
</script>

Props

Parameter	Description	Type	Options	Default
trigger	Trigger mode	string	hover / click / focus	click
title	Title	string	—	—
content	Content to display	string	—	—
width	Width	string/number	—	—
placement	Position of the popover	string	top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end	—
disabled	Disable the popover	Boolean	—	false
v-model:visible	Whether the popover is visible	Boolean	—	false
placement	Position of the popover	string	top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end	—
transition	Custom transition animation	string	—	fade-in-linear
show-arrow	Whether to show arrow	Boolean	—	true
popper-options	popper.js parameters	Object	—
show-after	Delay before showing, in milliseconds	number	—	0
hide-after	Delay before hiding, in milliseconds	number	—	0
auto-close	Auto-close after showing for the specified milliseconds. 0 means no auto-close	number	—	0
manual	Manual control mode. When true, mouse enter/leave events do not apply	Boolean	—	false
offset	Position offset amount	Number	—	0
appendToBody	Append the overlay to body	Boolean	—	true
options	Custom popper.js configuration options. See popper.js docs	Object	—	—
z-index	Z-index level. Default is 2000. The dialog auto-increments. If set, it appends and then auto-increments	Number	—	0

Slot

Name	Description
content	Content of the popover. When defined, overrides the content prop.