BPopover Migration ​

BPopover Migration ​

Summary ​

Migration notes for BPopover from BootstrapVue to BootstrapVueNext.

Affected APIs ​

• BPopover

Breaking Change ​

See Show and Hide shared properties.

See the v-html section for information on deprecation of the html prop.

Positioning Library ​

BootstrapVueNext uses floating-ui instead of Popper.js for positioning. This brings better performance and more features, but requires some migration:

Placement Values ​

Placement values have changed to align with floating-ui conventions:

Default Placement ​

The default placement has changed from right to top.

Triggers ​

Triggers work differently in BootstrapVueNext. Instead of space-separated string values, use individual boolean props:

Container → Teleport ​

The container prop has been replaced with Vue 3's teleport system:

<BPopover target="btn" container="my-container" />

<BPopover target="btn" teleport-to="#my-container" />
<!-- or disable teleport entirely -->
<BPopover target="btn" :teleport-disabled="true" />

Content Property ​

The content prop has been renamed to body for consistency:

<BPopover target="btn" content="Body text" />

<BPopover target="btn" body="Body text" />

Custom Classes ​

The custom-class prop has been split into more specific props:

• custom-class → body-class (for popover body)
• New: title-class (for popover title)

Variant ​

The variant prop has been deprecated. Use Bootstrap's color and background utility classes instead:

<BPopover variant="danger" />

<BPopover body-class="bg-danger text-white" title-class="bg-danger text-white border-danger" />

See Popover custom classes and variants for more details.

Programmatic Control ​

The .sync modifier on the show prop has been replaced with v-model:

<BPopover :show.sync="isVisible" />

<BPopover v-model="isVisible" />

Disabled State ​

The disabled prop and programmatic disabling features have been deprecated. Use manual=true combined with v-model for full control:

<BPopover :disabled.sync="isDisabled" />

<BPopover :manual="isDisabled" v-model="isVisible" />

Delay ​

The delay prop now defaults to {show: 100, hide: 300} instead of 50 for both.

Fallback Placement ​

fallback-placement has been deprecated. Use the noFlip prop or configure custom middleware via the floatingMiddleware prop. See the floating-ui documentation for advanced placement control.

Target as Function ​

The ability for the target prop to accept a function has been deprecated. Use a template ref, element ID string, or querySelector string instead.

$root Events ​

The $root event system (bv::show::popover, bv::hide::popover, etc.) has been deprecated. Use the usePopover composable or template refs with exposed methods instead:

<template>
  <BPopover ref="popover" />
</template>

<script lang="ts">
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-nocheck -- BSV example demonstrating deprecated $root.$emit pattern
export default {
  methods: {
    showPopover() {
      this.$root.$emit('bv::show::popover', 'my-popover')
    },
  },
}
</script>

<template>
  <BPopover ref="popover" />
</template>

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

const popover = ref()

// eslint-disable-next-line @typescript-eslint/no-unused-vars
const showPopover = () => {
  popover.value?.show()
}
</script>

Events ​

The disabled and enabled events have been deprecated along with the disabled prop.

See the Popover documentation for complete details on all available features.

Migration Notes ​

• Extracted from the canonical BootstrapVue → BootstrapVueNext migration guide.
• Review related migrations for shared prop, event, and slot changes.

Safe Automatic Rewrite ​

No. This entry includes behavioral or structural changes and should be reviewed manually before applying automated transforms.

Related Migrations ​

• show-hide
• v-html-props