Bootstrap 5 Popovers Events

Last Updated : 28 Feb, 2023

Bootstrap 5 Popovers Events start off when the different popover instances are initiated.

Bootstrap 5 Popovers Events:

show.bs.popover: As soon as the display instance method is called, this event occurs.
shown.bs.popover: When the popover is made visible to the user, this event is dispatched. It will not be fired until the CSS transition has been successfully accomplished.
hide.bs.popover: After calling the hide instance method, this event is instantly triggered.
hidden.bs.popover: After the popover has finished being hidden from the user, this event is fired. It will not be fired until the CSS transition has been successfully accomplished.
inserted.bs.popover: This event is triggered after the show.bs.popover event when the popover template has been added to the DOM.

Syntax:

var popoverElement = document.getElementById("popoverID");
popoverElement.addEventListener("show.bs.popover", function(){
    ...
});

Example 1: The code example below demonstrates how to use the show.bs.popover and hide.bs.popover events with the show() and hide() methods in popover using JavaScript. When the events are fired a message is prompted in the console (Press Ctrl+Shift+J (Windows / Linux) or Cmd+Opt+J (Mac) to open the browser console panel). The popover is placed on the right.

HTML

<!doctype html> 
<html lang="en"> 
  
<head> 
    <link href= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
        rel="stylesheet"> 
    <script src= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"> 
    </script> 
</head> 
  
<body class="container text-center"> 
    <h1 class="m-4 text-success"> 
        GeeksforGeeks 
    </h1> 
    <h4 class="ms-4"> 
        Bootstrap 5 Popovers Events 
    </h4> 
    <div class="container mt-4 p-4"> 
        <button type="button" 
            class="btn btn-success ms-3" 
            id="myPopover" 
            data-bs-toggle="popover"
            data-bs-placement="right" 
            data-bs-title="Right Popover"
            data-bs-content= 
                "This is a popover placed at Right."> 
            Demo Popover 
        </button> 
    </div> 
    <div class="container mt-4 p-4"> 
        <button type="button" 
            class="btn btn-success" id="showBtn"> 
            Show Popover 
        </button> 
        <button type="button" 
            class="btn btn-danger ms-3" id="hideBtn"> 
            Hide Popover 
        </button> 
    </div> 
  
    <script> 
        document.addEventListener("DOMContentLoaded", 
            function () { 
  
                // Get and Create the first popover instance 
                var popover_ele = 
                    document.getElementById("myPopover"); 
                var demoPopover = 
                    new bootstrap.Popover(popover_ele); 
  
                var btn_1 = document.getElementById("showBtn"); 
                btn_1.addEventListener("click", function () { 
                    demoPopover.show(); 
                }); 
                var btn_1 = document.getElementById("hideBtn"); 
                btn_1.addEventListener("click", function () { 
                    demoPopover.hide(); 
                }); 
  
                // Prompt the message in console when popover is shown 
                popover_ele.addEventListener("show.bs.popover", 
                    function () { 
                        console.log("Popover is shown"); 
                    }); 
                      
                // prompt the message in console popover is hidden 
                popover_ele.addEventListener("hide.bs.popover", 
                    function () { 
                        console.log("Popover is hidden"); 
                    }); 
            }); 
    </script> 
</body> 
  
</html> 

Output:

Example 2: The code example below demonstrates how to use the hidden.bs.popover event with the hide() method in popovers using JavaScript and an alert is shown when the event is fired. The popovers are placed at the top and left.

HTML

<!doctype html> 
<html lang="en"> 
  
<head> 
    <link href= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
        rel="stylesheet"> 
    <script src= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"> 
    </script> 
</head> 
  
<body class="container text-center"> 
    <h1 class="m-4 text-success"> 
        GeeksforGeeks 
    </h1> 
    <h4 class="ms-4"> 
        Bootstrap 5 Popovers Events 
    </h4> 
    <div class="container mt-4 p-4"> 
        <button type="button" 
            class="btn btn-success ms-3" 
            id="topPop" 
            data-bs-container="body" 
            data-bs-toggle="popover"
            data-bs-placement="top" 
            data-bs-content= 
                "This is a popover placed at the top."> 
            Top Popover 
        </button> 
  
        <button type="button" 
            class="btn btn-success ms-5" 
            id="leftPop" 
            data-bs-container="body"
            data-bs-toggle="popover" 
            data-bs-placement="left" 
            data-bs-content= 
                "This is a popover placed at the left."> 
            Left Popover 
        </button> 
    </div> 
  
    <div class="container mt-4 p-4"> 
        <button type="button" 
            class="btn btn-danger" 
            id="hideBtn_1"> 
            Hide top Popover 
        </button> 
  
        <button type="button" 
            class="btn btn-danger ms-3" 
            id="hideBtn_2"> 
            Hide left Popover 
        </button> 
    </div> 
  
    <script> 
        document.addEventListener("DOMContentLoaded", 
            function () { 
  
                // Get and Create the first popover instance 
                var popover_ele_1 = 
                    document.getElementById("topPop"); 
                var popover_1 = 
                    new bootstrap.Popover(popover_ele_1); 
  
                // Get and Create the second popover instance 
                var popover_ele_2 = 
                    document.getElementById("leftPop"); 
                var popover_2 = 
                    new bootstrap.Popover(popover_ele_2); 
  
                var btn_1 = document.getElementById("hideBtn_1"); 
                btn_1.addEventListener("click", function () { 
                    popover_1.hide(); 
                }); 
  
                // Show alert when the top popover is hidden 
                popover_ele_1.addEventListener("hidden.bs.popover", 
                    function () { 
                        alert("Top Popover has been Hidden."); 
                    }); 
  
                var btn_2 = 
                    document.getElementById("hideBtn_2"); 
  
                btn_2.addEventListener("click", function () { 
                    popover_2.hide(); 
                }); 
                  
                // Show alert when the left popover is hidden 
                popover_ele_2.addEventListener("hidden.bs.popover", 
                    function () { 
                        alert("Left Popover has been Hidden."); 
                    }); 
            }); 
    </script> 
</body> 
  
</html> 