Popovers
Link
<a href="#" data-bs-toggle="popover" data-bs-content="Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo.">Popover for link</a><a href="#" data-bs-toggle="popover" data-bs-content="Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo.">Popover for link</a>
Button
<button type="button" class="btn btn-secondary" data-bs-toggle="popover" data-bs-content="Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo.">Popover for button</button><button type="button" class="btn btn-secondary" data-bs-toggle="popover" data-bs-content="Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo.">Popover for button</button>
Title
<button type="button" class="btn btn-secondary" data-bs-toggle="popover" title="Popover title" data-bs-content="Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo.">Popover with title</button><button type="button" class="btn btn-secondary" data-bs-toggle="popover" title="Popover title" data-bs-content="Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo.">Popover with title</button>
Custom HTML
<button type="button" class="btn btn-secondary" data-bs-toggle="popover" data-bs-html="true" title="<span class='badge bg-primary'>Popover title</span>" data-bs-content="<strong>Popover</strong> <small>with</small> <em>custom HTML</em>">Popover with custom HTML</button><button type="button" class="btn btn-secondary" data-bs-toggle="popover" data-bs-html="true" title="<span class='badge bg-primary'>Popover title</span>" data-bs-content="<strong>Popover</strong> <small>with</small> <em>custom HTML</em>">Popover with custom HTML</button>
Position
<button type="button" class="btn btn-secondary" data-bs-toggle="popover" data-bs-placement="top" title="Popover title" data-bs-content="Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo.">Popover on top</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="popover" data-bs-placement="right" title="Popover title" data-bs-content="Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo.">Popover on right</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="popover" data-bs-placement="bottom" title="Popover title" data-bs-content="Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo.">Popover on bottom</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="popover" data-bs-placement="left" title="Popover title" data-bs-content="Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo.">Popover on left</button><button type="button" class="btn btn-secondary" data-bs-toggle="popover" data-bs-placement="top" title="Popover title" data-bs-content="Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo.">Popover on top</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="popover" data-bs-placement="right" title="Popover title" data-bs-content="Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo.">Popover on right</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="popover" data-bs-placement="bottom" title="Popover title" data-bs-content="Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo.">Popover on bottom</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="popover" data-bs-placement="left" title="Popover title" data-bs-content="Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo.">Popover on left</button>
Animation
<button type="button" class="btn btn-secondary" data-bs-toggle="popover" data-bs-animation="false" title="Popover title" data-bs-content="Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo.">Popover without animation</button><button type="button" class="btn btn-secondary" data-bs-toggle="popover" data-bs-animation="false" title="Popover title" data-bs-content="Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo.">Popover without animation</button>
Delay
Popover with delay in ms for showing and hiding
<button type="button" class="btn btn-secondary" data-bs-toggle="popover" data-bs-delay="500" title="Popover title" data-bs-content="Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo.">Popover with delay</button><button type="button" class="btn btn-secondary" data-bs-toggle="popover" data-bs-delay="500" title="Popover title" data-bs-content="Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo.">Popover with delay</button>
Trigger type
Popover triggered by click and hover
<button type="button" class="btn btn-secondary" data-bs-toggle="popover" data-bs-trigger="click hover" title="Popover title" data-bs-content="Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo.">Trigger by click and hover</button><button type="button" class="btn btn-secondary" data-bs-toggle="popover" data-bs-trigger="click hover" title="Popover title" data-bs-content="Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo.">Trigger by click and hover</button>
Dismissible
Dismiss on next click outside of element
<a href="#!" class="btn btn-secondary" tabindex="0" role="button" data-bs-toggle="popover" data-bs-trigger="focus" title="Popover title" data-bs-content="Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo.">Dismiss on next click</a><a href="#!" class="btn btn-secondary" tabindex="0" role="button" data-bs-toggle="popover" data-bs-trigger="focus" title="Popover title" data-bs-content="Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo.">Dismiss on next click</a>
Disabled elements
<span class="d-inline-block" data-bs-toggle="popover" title="Popover title" data-bs-content="Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo.">
<button type="button" class="btn btn-secondary" disabled="" style="pointer-events: none;">Popover for disabled element</button>
</span><span class="d-inline-block" data-bs-toggle="popover" title="Popover title" data-bs-content="Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo.">
<button type="button" class="btn btn-secondary" disabled="" style="pointer-events: none;">Popover for disabled element</button>
</span>