Documentation and examples for adding Bootstrap popovers, like those found in iOS, to any element on your site.
title
and content
attributes will never show a popover.disabled
elements must be triggered on a wrapper element.textNowrap
on your b-a
components to avoid this behavior.<template>
<b-button
button="danger"
size="lg"
toggle="popover"
title="Popover title"
content="And here's some amazing content. It's very engaging. Right?"
>
Click to toggle popover
</b-button>
</template>
Four options are available: top, right, bottom, and left aligned. Directions are mirrored when using Bootstrap in RTL.
<template>
<b-button
button="secondary"
toggle="popover"
placement="top"
content="Top popover"
>
Popover on top
</b-button>
<b-button
button="secondary"
toggle="popover"
placement="right"
content="Right popover"
>
Popover on right
</b-button>
<b-button
button="secondary"
toggle="popover"
placement="bottom"
content="Bottom popover"
>
Popover on bottom
</b-button>
<b-button
button="secondary"
toggle="popover"
placement="left"
content="Left popover"
>
Popover on left
</b-button>
</template>
Use the focus
trigger to dismiss popovers on the user's next click of a different element than the toggle element.
<template>
<b-a
tabindex="0"
size="lg"
button="secondary"
toggle="popover"
placement="left"
trigger="focus"
title="Dismissible popover"
content="And here's some amazing content. It's very engaging. Right?"
>
Dismissible popover
</b-a>
</template>
Elements with the disabled
attribute aren't interactive, meaning users cannot hover or click them to trigger a popover (or tooltip). As a workaround, you'll want to trigger the popover from a wrapper b-div
component or span
tag, ideally made keyboard-focusable using tabindex="0"
.
For disabled popover triggers, you may also prefer trigger="hover focus"
so that the popover appears as immediate visual feedback to your users as they may not expect to _click_ on a disabled element.
<template>
<b-button
button="danger"
size="lg"
toggle="popover"
trigger="hover focus"
content="Disabled popover"
>
Click to toggle popover
</b-button>
<span
class="d-inline-block"
tabindex="0"
toggle="popover"
data-b-s-trigger="hover focus"
data-bs-content="Disabled popover"
>
<b-button
class="btn btn-primary"
type="button"
disabled
>
Disabled button
</b-button>
</span>
</template>