Popover

Basic usage

Similar to Tooltip, Popover is also built with BPopper. So for some duplicated attributes, please refer to the documentation of Tooltip.

The trigger attribute is used to define how popover is triggered: hover, click, focus or contextmenu . If you want to manually controll it, you can set :visible.

---

<template>
  <b-space wrap>
    <b-popover
      placement="top-start"
      title="Title"
      :width="200"
      trigger="hover"
      content="Lorem ipsum dolor sit amet"
    >
      <template #reference>
        <b-button small>Hover to activate</b-button>
      </template>
    </b-popover>

    <b-popover
      placement="bottom"
      title="Title"
      :width="200"
      trigger="click"
      content="Lorem ipsum dolor sit amet"
    >
      <template #reference>
        <b-button small>Click to activate</b-button>
      </template>
    </b-popover>

    <b-popover
      ref="popover"
      placement="right"
      title="Title"
      :width="200"
      trigger="focus"
      content="Lorem ipsum dolor sit amet"
    >
      <template #reference>
        <b-button small>Focus to activate</b-button>
      </template>
    </b-popover>

    <b-popover
      ref="popover"
      title="Title"
      :width="200"
      trigger="contextmenu"
      content="Lorem ipsum dolor sit amet"
    >
      <template #reference>
        <b-button small>contextmenu to activate</b-button>
      </template>
    </b-popover>

    <b-popover
      :visible="visible"
      placement="bottom"
      title="Title"
      :width="200"
      content="Lorem ipsum dolor sit amet"
    >
      <template #reference>
        <b-button small @click="visible = !visible"
          >Manual to activate</b-button
        >
      </template>
    </b-popover>
  </b-space>
</template>

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

const visible = ref(false)
</script>

Virtual Triggering

Like Tooltip, Popover can be triggered by virtual elements, if your use case includes separate the triggering element and the content element, you should definitely use the mechanism, normally we use #reference to place our triggering element, with triggering-element API you can set your triggering element anywhere you like, but notice that the triggering element should be an element that accepts mouse and keyboard event.

---

<template>
  <b-button ref="buttonRef" v-click-outside="onClickOutside" small
    >Click to activate</b-button
  >

  <b-popover
    ref="popoverRef"
    :virtual-ref="buttonRef"
    trigger="click"
    title="With title"
    virtual-triggering
  >
    <span> Some content </span>
  </b-popover>
</template>

<script setup lang="ts">
import { ref, unref } from 'vue'
import { ClickOutside as vClickOutside } from 'bigin-ui'
const buttonRef = ref()
const popoverRef = ref()
const onClickOutside = () => {
  unref(popoverRef).popperRef?.delayHide?.()
}
</script>

Rich Content

Other components/elements can be nested in popover. Following is an example of nested table.

Replace the content attribute with a default slot.

---

<template>
  <div class="flex items-center">
    <b-popover placement="right" :width="400" trigger="click">
      <template #reference>
        <b-button small class="mr-2">Click to activate</b-button>
      </template>
      <b-table :data="gridData">
        <b-table-column width="150" property="date" label="date" />
        <b-table-column width="100" property="name" label="name" />
        <b-table-column width="300" property="address" label="address" />
      </b-table>
    </b-popover>

    <b-popover :width="320" popper-class="p-6">
      <template #reference>
        <b-avatar
          :size="32"
          circle
          src="https://avatars.githubusercontent.com/u/101083410?s=64&v=4"
        />
      </template>
      <template #default>
        <div class="flex items-center">
          <b-avatar
            :size="64"
            circle
            src="https://avatars.githubusercontent.com/u/101083410?s=128&v=4"
            class="mr-4"
          />
          <div>
            <h4>BigIn UI</h4>
            <p class="c-neutral-7">@bigin</p>
          </div>
        </div>
        <p class="mt-4">
          BigIn UI, a Vue 3 based component library for developers, designers
          and product managers
        </p>
      </template>
    </b-popover>
  </div>
</template>

<script lang="ts" setup>
const gridData = [
  {
    date: '2016-05-02',
    name: 'Jack',
    address: 'New York City',
  },
  {
    date: '2016-05-04',
    name: 'Jack',
    address: 'New York City',
  },
  {
    date: '2016-05-01',
    name: 'Jack',
    address: 'New York City',
  },
  {
    date: '2016-05-03',
    name: 'Jack',
    address: 'New York City',
  },
]
</script>

Nested Operation

Of course, you can nest other operations. It's more light-weight than using a dialog.

---

<template>
  <b-popover v-model:visible="visible" placement="top" :width="220">
    <p>Are you sure to delete this?</p>
    <div class="flex justify-end mt-4">
      <b-button small @click.prevent="visible = false">Cancel</b-button>
      <b-button primary small class="ml-2" @click.prevent="visible = false"
        >Confirm</b-button
      >
    </div>
    <template #reference>
      <b-button small @click.prevent="visible = true">Delete</b-button>
    </template>
  </b-popover>
</template>

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

const visible = ref(false)
</script>

Attributes

Attribute	Description	Type	Accepted Values	Default
trigger	how the popover is triggered	string	click / focus / hover / contextmenu	click
title	popover title	string	—	—
effect	Tooltip theme, built-in theme: dark / light	string	string	light
content	popover content, can be replaced with a default slot	string	—	—
width	popover width	string / number	—	Min width 150px
placement	popover placement	string	top / top-start / top-end / bottom / bottom-start / bottom-end / left / left-start / left-end / right /right-start / right-end	bottom
disabled	whether Popover is disabled	boolean	—	false
visible / v-model:visible	whether popover is visible	Boolean	—	false
offset	popover offset	number	—	0
transition	popover transition animation	string	—	b-fade-in-linear
show-arrow	whether a tooltip arrow is displayed or not.	boolean	—	true
popper-options	parameters for popper.js	object	please refer to popper.js	{modifiers: [{name: 'computeStyles',options: {gpuAcceleration: false}}]}
popper-class	custom class name for popover	string	—	—
show-after	delay of appearance, in millisecond	number	—	0
hide-after	delay of disappear, in millisecond	number	—	200
auto-close	timeout in milliseconds to hide tooltip	number	—	0
tabindex	tabindex of Popover	number	—	—
teleported	whether popover dropdown is teleported to the body	boolean	true / false	true
persistent	when popover inactive and persistent is false , popover will be destroyed	boolean	—	true

Slots

Name	Description
—	text content of popover
reference	HTML element that triggers popover

Events

Event Name	Description	Parameters
show	triggers when popover shows	—
before-enter	triggers when the entering transition befores	—
after-enter	triggers when the entering transition ends	—
hide	triggers when popover hides	—
before-leave	triggers when the leaving transition befores	—
after-leave	triggers when the leaving transition ends	—