Bootstrap 5 Popovers Four directions

Last Updated : 05 Dec, 2022

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.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>Bootstrap 5 Popovers Four directions</title> 
  
    <link href= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" 
           rel="stylesheet"> 
    <script src= 
"https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"> 
    </script> 
    <script src= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.min.js"> 
    </script> 
  
</head> 
  
<body> 
    <div class="container text-center d-flex flex-column  
            justify-content-center align-items-center"> 
        <div class="header"> 
            <h3 class="text-success">GeeksforGeeks</h3> 
            <h5>Bootstrap 5 Popovers Four directions</h5> 
        </div> 
        <div> 
            <button 
                tabindex="0" 
                class="btn btn-success d-block mt-5" 
                role="button" 
                data-bs-toggle="popover"
                title="GFG Popover" 
                data-bs-trigger="focus" 
                data-bs-placement="left"
                data-bs-content="This popover will show on the  
                         left side when user clicks 
                         on the GeeksforGeeks popover button ."> 
                GeeksforGeeks Left Popover. 
            </button> 
  
            <button tabindex="0" 
            class="btn btn-warning d-block mt-5" 
            role="button" data-bs-toggle="popover"
                title="GFG Popover" 
                data-bs-trigger="focus" 
                data-bs-placement="right"
                data-bs-content="This popover will show on the  
                         right side when user clicks on  
                         the GeeksforGeeks popover button."> 
                GeeksforGeeks Right Popover. 
            </button> 
  
        </div> 
    </div> 
    <script> 
  
        var popoverTriggerList =  
        [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]')) 
        var popoverList = popoverTriggerList.map(function (popoverTriggerEl) { 
            return new bootstrap.Popover(popoverTriggerEl) 
        }) 
    </script> 
</body>

Output:

Popovers Four directions

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.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>Bootstrap 5 Popovers Four directions</title> 
  
    <link href= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" 
           rel="stylesheet"> 
    <script src= 
"https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"> 
    </script> 
    <script src= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.min.js"> 
    </script> 
  
</head> 
  
<body> 
    <div class="container text-center d-flex flex-column  
        justify-content-center align-items-center"> 
        <div class="header mb-5"> 
            <h3 class="text-success">GeeksforGeeks</h3> 
            <h5>Bootstrap 5 Popovers Four directions</h5> 
        </div> 
        <div> 
            <button 
                tabindex="0" 
                class="btn btn1 btn-success d-block mt-5" 
                role="button" 
                data-bs-toggle="popover"
                title="GFG Popover" 
                data-bs-trigger="focus" 
                data-bs-placement="top"
                data-bs-content="This popover will show on the  
                       top side when user clicks on the 
                       GeeksforGeeks popover button ."> 
                GeeksforGeeks Top Popover. 
            </button> 
  
            <button 
                tabindex="0" 
                class="btn btn2 btn-warning d-block mt-3" 
                role="button" 
                data-bs-toggle="popover"
                title="GFG Popover" 
                data-bs-trigger="focus" 
                data-bs-placement="bottom"
                data-bs-content="This popover will show on the 
                          bottom side when user clicks 
                          on the GeeksforGeeks popover button."> 
                GeeksforGeeks Bottom Popover. 
            </button> 
  
        </div> 
    </div> 
  
    <script> 
  
        var popoverTriggerList = 
         [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]')) 
        var popoverList = popoverTriggerList.map(function (popoverTriggerEl) { 
            return new bootstrap.Popover(popoverTriggerEl) 
        }) 
    </script> 
</body>