Default Popover
Use a default popover in Bootstrap by adding the data-bs-toggle="popover" attribute to an element. Set the popover content with the data-bs-content attribute.
<button type="button" class="btn btn-primary" data-bs-placement="top" data-bs-toggle="popover" data-bs-content="This is a very beautiful popover, show some love.">
Default Popover
</button>
<button type="button" class="btn btn-primary" data-bs-custom-class="popover-no-arrow" data-bs-placement="top" data-bs-toggle="popover" data-bs-content="This is a very beautiful popover, show some love.">
No Arrow Popover
</button>Popover Directions
Set popover directions in Bootstrap with classes like data-bs-placement="top" or data-bs-placement="bottom". These classes control where the popover appears relative to the element.
<button type="button" class="btn btn-primary" data-bs-custom-class="popover-primary" data-bs-placement="top" data-bs-toggle="popover" title="Top Popover" data-bs-content="This is a very beautiful popover, show some love.">
Popover on top
</button>
<button type="button" class="btn btn-primary" data-bs-custom-class="popover-primary" data-bs-placement="right" data-bs-toggle="popover" title="Right Popover" data-bs-content="This is a very beautiful popover, show some love.">
Popover on right
</button>
<button type="button" class="btn btn-primary" data-bs-custom-class="popover-primary" data-bs-placement="bottom" data-bs-toggle="popover" title="Bottom Popover" data-bs-content="This is a very beautiful popover, show some love.">
Popover on bottom
</button>
<button type="button" class="btn btn-primary" data-bs-custom-class="popover-primary" data-bs-placement="left" data-bs-toggle="popover" title="Left Popover" data-bs-content="This is a very beautiful popover, show some love.">
Popover on left
</button>Colored Popover
Apply a custom color to your Bootstrap popover using the data-bs-custom-class="popover-*" attribute. This class sets a custom background color for the popover.
<button type="button" class="btn btn-primary" data-bs-custom-class="popover-primary" data-bs-placement="top" data-bs-toggle="popover" title="Primary Popover" data-bs-content="This is a very beautiful popover, show some love.">
Primary
</button>
<button type="button" class="btn btn-secondary" data-bs-custom-class="popover-secondary" data-bs-placement="top" data-bs-toggle="popover" title="Secondary Popover" data-bs-content="This is a very beautiful popover, show some love.">
Secondary
</button>
<button type="button" class="btn btn-success" data-bs-custom-class="popover-success" data-bs-placement="bottom" data-bs-toggle="popover" title="Success Popover" data-bs-content="This is a very beautiful popover, show some love.">
Success
</button>
<button type="button" class="btn btn-info" data-bs-custom-class="popover-info" data-bs-placement="bottom" data-bs-toggle="popover" title="Info Popover" data-bs-content="This is a very beautiful popover, show some love.">
Info
</button>
<button type="button" class="btn btn-warning" data-bs-custom-class="popover-warning" data-bs-placement="right" data-bs-toggle="popover" title="Warning Popover" data-bs-content="This is a very beautiful popover, show some love.">
Warning
</button>
<button type="button" class="btn btn-danger" data-bs-custom-class="popover-danger" data-bs-placement="right" data-bs-toggle="popover" title="Danger Popover" data-bs-content="This is a very beautiful popover, show some love.">
Danger
</button>
<button type="button" class="btn btn-light" data-bs-custom-class="popover-light" data-bs-placement="left" data-bs-toggle="popover" title="Light Popover" data-bs-content="This is a very beautiful popover, show some love.">
Light
</button>
<button type="button" class="btn btn-dark" data-bs-custom-class="popover-dark" data-bs-placement="left" data-bs-toggle="popover" title="Dark Popover" data-bs-content="This is a very beautiful popover, show some love.">
Dark
</button>