usePopover​

Setup​

To useusePopover, you need one of the following setup approaches:

BApp Component (Recommended)​

The easiest way is to wrap your application with theBApp component, which automatically sets up the orchestrator and registry:

<template>  <BApp>    <router-view />  </BApp></template>

Plugin Setup (Legacy)​

Alternatively, you can use the traditional plugin approach.

Note: As of v0.40, there are no separate toast/modal/popover controller plugins. If you stick with plugins, use the singleorchestratorPlugin (or preferBApp).

Creating Popovers​

Popovers and tooltips can be created using thepopover ortooltip methods:

<template>  <BButton ref="popoverButton">Hover me</BButton></template><script setup lang="ts">import {type ComponentPublicInstance, onMounted, ref}from 'vue'import {usePopover}from 'bootstrap-vue-next'const {popover}= usePopover()const popoverButton = ref<ComponentPublicInstance>()onMounted(()=> {  popover({title:'Hello World!', body:'This is a popover.', target: popoverButton.value})})</script>

Reactivity Withinpopover andtooltip​

The methods accept reactive properties usingMaybeRef, allowing dynamic updates to the popover content.

<template>  <BButton ref="reactiveExample">Hover me</BButton></template><script setup lang="ts">import {onMounted, onUnmounted, ref}from 'vue'import {BButton, usePopover}from 'bootstrap-vue-next'const {tooltip}= usePopover()const title = ref('Hello')const reactiveExample = ref<HTMLElement>()let intervalId: NodeJS.Timeout | undefinedonMounted(()=> {  intervalId= setInterval(()=> {    title.value= title.value=== 'Hello' ? 'World' : 'Hello'  },2500)  tooltip({    title,    target: reactiveExample.value,  })})onUnmounted(()=> {  if (intervalId!== undefined) {    clearInterval(intervalId)  }})</script>

Advanced Creation​

For more control, you can use thecomponent property to render a custom component or theslots property to define slot content dynamically.

<template>  <BButton ref="advancedExample">Hover me</BButton></template><script setup lang="ts">import {h, onMounted, ref}from 'vue'import {BButton, usePopover}from 'bootstrap-vue-next'const {popover}= usePopover()const advancedExample = ref<HTMLElement>()onMounted(()=> {  popover({    slots: {      default: (scope)=> h('div',null,`Custom content - Visible: ${scope.visible}`),    },    target: advancedExample.value,    title:'Advanced Popover',  })})</script>

Return Value​

Thepopover andtooltip methods return an awaitable controllerPromiseWithComponent. You can call its methods immediately to control the instance, and you can alsoawait it to resolve when the popover/tooltip is hidden. The controller exposes:

• show: () => PromiseWithComponent - Shows the popover.
• hide: (trigger?: string) => PromiseWithComponent - Hides the popover, optionally passing a trigger.
• toggle: () => PromiseWithComponent - Toggles the visibility of the popover.
• get: () => PopoverOrchestratorParam | undefined - Returns the current properties of the popover, or undefined if none.
• set: (props: Partial<PopoverOrchestratorParam>) => PromiseWithComponent - Updates the popover's properties.
• destroy: () => void - Destroys the popover and cleans up resources.

Lifecycle​

By default, the popover is destroyed when the current scope is exited. You can manually destroy it using thedestroy method.

const pop = popover({title:'Hello World!'})pop.show()// do somethingpop.destroy()

Alternatively, useawait using in TypeScript 5.2+ to automatically destroy the popover when the scope is exited.

await using pop = popover({title:'Hello World!'})