Bootstrap 5 Popovers Four directions

The popover is a bootstrap component used to mainly add additional information to a website. It is a pop-up box that appears when the user clicks on an element. Using bootstrap attributes, It can be aligned in any of the four directions left, top, right, and bottom. 

Bootstrap 5 Popovers Four directions Class: There is no pre-defined class for the direction you need to use the data-bs-placement attribute.

Bootstrap 5 Popovers Four directions Attributes:

• data-bs-placement: This attribute defines the direction of the popover. Accepted values are right, left, top, and bottom.

Syntax:

 <button 
 data-bs-placement="left | right | bottom | top" 
 ...
</button>

Below examples illustrate the Bootstrap 5 Popovers Four directions:

Example 1: In this example, we show how to show the popover on the left and right of the parent element. Here we set the "data-bs-placement" attribute of the popover to left and right respectively.

Output:

Example 2: This example illustrates how to show the popover on the top and bottom of the parent element. Here we set the "data-bs-placement" attribute of the popover to top and bottom respectively.

Output:

Reference:https://getbootstrap.com/docs/5.0/components/popovers/#four-directions