Note: The markup that can be copied to your clipboard from this page is utilizing the latest Bootstrap 5.2.2 library markup. If your project is currently using the previous Bootstrap 4.6.2 library, you must replace any "data-bs-" attribute with "data-". The "-bs" attribute addition applies to Boostrap 5.2.2 only so as to not collide with other Javascript frameworks that may also utilize "data" attributes.
Click the buttons below to see the four popover directions: top, bottom, left, and right. Directions are mirrored when using RTL.
<button type="button" class="btn btn-default" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-placement="top" data-bs-title="Popover Heading" data-bs-content="Popover content...">Button Text</button>
<button type="button" class="btn btn-default" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-placement="bottom" data-bs-title="Popover Heading" data-bs-content="Popover content...">Button Text</button>
<button type="button" class="btn btn-default" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-placement="left" data-bs-title="Popover Heading" data-bs-content="Popover content...">Button Text</button>
<button type="button" class="btn btn-default" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-placement="right" data-bs-title="Popover Heading" data-bs-content="Popover content...">Button Text</button>