Popover
Documentation and examples for adding BootstrapVueNext popovers, like those found in iOS, to any element on your site.
Basic examples
Four directions are available: Top, Right, Bottom and Left. For adding popovers read official documentation of bootstrap.
<template>
<BButton
v-b-popover.click="{
title: 'Popover title',
content: 'Vivamus sagittis lacus vel augue laoreet rutrum faucibus.',
}"
variant="secondary"
>
Click to Toggle
</BButton>
<BButton
v-b-popover.click="{
content: 'Vivamus sagittis lacus vel augue laoreet rutrum faucibus.',
placement: 'top',
}"
variant="secondary"
>
Popover on top
</BButton>
<BButton
v-b-popover.click="{
content: 'Vivamus sagittis lacus vel augue laoreet rutrum faucibus.',
placement: 'right',
}"
variant="secondary"
>
Popover on right
</BButton>
<BButton
v-b-popover.click="{
content: 'Vivamus sagittis lacus vel augue laoreet rutrum faucibus.',
placement: 'bottom',
}"
variant="secondary"
>
Popover on bottom
</BButton>
<BButton
v-b-popover.click="{
content: 'Vivamus sagittis lacus vel augue laoreet rutrum faucibus.',
placement: 'left',
}"
variant="secondary"
>
Popover on left
</BButton>
</template>
Disabled elements
Elements with the disabled attribute aren't interactive, meaning users cannot focus, hover, or click them to trigger a tooltip (or popover). As a workaround, you'll want to trigger the tooltip from a wrapper <div> or <span>, ideally made keyboard-focusable using tabindex="0".
<template>
<span
v-b-popover="{
content: 'Disabled popover',
placement: 'right',
}"
>
<BButton variant="primary" disabled>Disabled button</BButton>
</span>
</template>