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.
Hover over the buttons below to see the four tooltips directions: top, bottom, left, and right. Directions are mirrored when using RTL.
<button type="button" class="btn btn-default tooltips" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-original-title="Tooltip Text">Button Text</button>
<button type="button" class="btn btn-default tooltips" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-original-title="Tooltip Text">Button Text</button>
<button type="button" class="btn btn-default tooltips" data-bs-toggle="tooltip" data-bs-placement="left" data-bs-original-title="Tooltip Text">Button Text</button>
<button type="button" class="btn btn-default tooltips" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-original-title="Tooltip Text">Button Text</button>