Aquileo | 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.

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:

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>

Output:

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

Bootstrap 5 Popovers Four directions

Explore