usePopover

Setup ​

To use usePopover, you need one of the following setup approaches:

BApp Component (Recommended) ​

The easiest way is to wrap your application with the BApp 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 single orchestratorPlugin (or prefer BApp).

Creating Popovers ​

Popovers and tooltips can be created using the popover or tooltip 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 Within popover and tooltip ​

The methods accept reactive properties using MaybeRef, 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 | undefined

onMounted(() => {
  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 the component property to render a custom component or the slots 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 ​

The popover and tooltip methods return an awaitable controller PromiseWithComponent. You can call its methods immediately to control the instance, and you can also await 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 the destroy method.

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

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

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