BootstrapVueNext

Docs to be written

Auto close popover when hidden by `hide` middleware

The close-on-hide prop can be used to have the popover automatically close when the target is scrolled out of view. The boundary and boundary-padding props can be used to control what's considered clipping.

HTML

vue

<template>
  <BPopover :click="true" :close-on-hide="true" :delay="{show: 0, hide: 0}">
    <template #target>
      <BButton>Click me. Popover closes when clipped</BButton>
    </template>
    Scroll me out of view
  </BPopover>
  <BPopover
    :click="true"
    :close-on-hide="true"
    :delay="{show: 0, hide: 0}"
    :boundary-padding="{top: navHeight}"
  >
    <template #title>Scroll me out of view</template>
    <template #target>
      <BButton>This popover gets hidden by the top nav</BButton>
    </template>
  </BPopover>
</template>

<script setup lang="ts">
const navRef = ref(null)
onMounted(() => {
  navRef.value = document.body.querySelector('#app > nav')
})
const navHeight = computed(() => navRef.value?.clientHeight)
</script>

Component Reference

<BPopover>

View Source

<BPopover> Properties
<BPopover> Events
<BPopover> Slots

Adding styles: .tooltip, .popover

Properties

Prop	Type	Default	Description
boundary	`Boundary \| RootBoundary`	`'clippingAncestors'`
boundary-padding	`Padding`	`undefined`
click	`boolean`	`false`
close-on-hide		`undefined`
content	`string`	`undefined`
custom-class	`ClassValue`	`''`
delay	`number \| { show: number; hide: number }`	`'() => {show: 100, hide: 300})'`
floating-middleware	`Middleware[]`	`undefined`
hide-margin	`number`	`0`	The margin to apply when hiding the popover on pointer leave (how far the pointer can move off the target before hiding the popover)
id	`string`	`undefined`
initial-animation	`boolean`	`false`	When set, enables the initial animation on mount
inline	`boolean`	`false`
lazy	`boolean`	`false`	When set, the content will not be mounted until opened
manual	`boolean`	`false`
model-value	`boolean`	`false`	Controls the visibility of the component
no-animation	`boolean`	`false`	When set, disables the animation
no-auto-close	`boolean`	`false`
no-fade	`boolean`	`false`	Alias for `noAnimation`
no-flip	`boolean`	`false`
no-hide	`boolean`	`false`
no-shift	`boolean`	`false`
no-size	`boolean`	`false`
noninteractive	`boolean`	`false`
offset	`Numberish \| null`	`null`
placement	`PopoverPlacement`	`'top'`
realtime	`boolean`	`false`
reference	`string \| ComponentPublicInstance \| HTMLElement \| null`	`null`
show	`boolean`	`false`	When set, and prop 'visible' is false on mount, will animate from closed to open on initial mount. Mainly to help with template show. Use model-value for reactive show/hide
strategy	`Strategy`	`'absolute'`
target	`string \| ComponentPublicInstance \| HTMLElement \| null`	`null`
teleport-disabled	`boolean`	`false`
teleport-to	`string \| RendererElement \| null \| undefined`	`undefined`
title	`string`	`undefined`
tooltip	`boolean`	`false`
trans-props	`TransitionProps`	`undefined`	Transition properties
unmount-lazy	`boolean`	`false`	When set and `lazy` is true, the content will be unmounted when closed
variant	`ColorVariant \| null`	`null`
visible	`boolean`	`false`	When 'true', open without animation

Events

Event	Args	Description
hidden	`value: BvTriggerableEvent`
hide	`value: BvTriggerableEvent`
hide-prevented
show	`value: BvTriggerableEvent`
show-prevented
shown	`value: BvTriggerableEvent`

Slots

Name	Scope	Description
default
target	`show: () => void` `hide: (trigger: string) => void` `toggle: () => void` `visible: boolean`
title

Popover ​

Docs to be written ​