Bootstrap 5 Popovers hide() Method

Last Updated : 08 Feb, 2023

Bootstrap 5 Popovers hide() Method hides the popover for an element. It will return the value to the caller before the popover actually gets hidden. This will be considered as the manual triggering of the popover.

Syntax:

popover-element.hide();

Example 1: The code example below demonstrates how we can use the hide() method in popovers using JavaScript. Here, 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> 
    <h1 class="m-4 text-success"> 
        GeeksforGeeks 
    </h1> 
    <h4 class="ms-4"> 
        Bootstrap 5 Popovers hide() Method 
    </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-secondary" 
                id="hideBtn_1"> 
            Hide top Popover 
        </button> 
        <button type="button" 
                class="btn btn-secondary ms-3" 
                id="hideBtn_2"> 
            Hide left Popover 
        </button> 
    </div> 
    <script> 
        document.addEventListener("DOMContentLoaded", function () { 
            // Create the first popover instance 
            var popover_1 =  
                new bootstrap.Popover(document.getElementById("topPop")); 
  
            // Create the second popover instance 
            var popover_2 =  
                new bootstrap.Popover(document.getElementById("leftPop")); 
  
            var btn_1 = document.getElementById("hideBtn_1"); 
            btn_1.addEventListener("click", function () { 
                popover_1.hide(); 
            }); 
            var btn_2 = document.getElementById("hideBtn_2"); 
            btn_2.addEventListener("click", function () { 
                popover_2.hide(); 
            }); 
        }); 
    </script> 
</body> 
  
</html>

Output:

Example 2: The code example below demonstrates how we can use the hide() method in popovers using JQuery, here the popovers are placed at the right and bottom. In JQuery we cannot create an instance of the popover so we are using the show() method here to kickstart the popover.

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://code.jquery.com/jquery-3.5.1.min.js"> 
    </script> 
    <script src= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"> 
    </script> 
</head> 
  
<body> 
    <h1 class="m-4 text-success"> 
        GeeksforGeeks 
    </h1> 
    <h4 class="ms-4"> 
        Bootstrap 5 Popovers hide() Method 
    </h4> 
    <div class="container mt-4 p-4"> 
        <button type="button" 
                class="btn btn-primary ms-3" 
                id="rightPop" 
                data-bs-container="body"
                data-bs-toggle="popover" 
                data-bs-placement="right" 
                data-bs-content="This is a popover placed at the right."> 
            Right Popover 
        </button> 
        <button type="button" 
                class="btn btn-primary ms-5" 
                id="bottomPop" 
                data-bs-container="body"
                data-bs-toggle="popover" 
                data-bs-placement="bottom"
                data-bs-content="This is a popover placed at the bottom."> 
            Bottom Popover 
        </button> 
    </div> 
    <div class="container mt-4 p-4"> 
        <button type="button" 
                class="btn btn-success" 
                id="showBtn_1"> 
            Show right Popover 
        </button> 
        <button type="button" 
                class="btn btn-success ms-2" 
                id="showBtn_2"> 
            Show bottom Popover 
        </button> 
    </div> 
    <div class="container mt-4 p-4"> 
        <button type="button" 
                class="btn btn-danger" 
                id="hideBtn_1"> 
            Hide right Popover 
        </button> 
        <button type="button" 
                class="btn btn-danger ms-3" 
                id="hideBtn_2"> 
            Hide bottom Popover 
        </button> 
    </div> 
    <script> 
        $(document).ready(function () { 
            $("#showBtn_1").click(function () { 
                $("#rightPop").popover("show"); 
            }); 
            $("#showBtn_2").click(function () { 
                $("#bottomPop").popover("show"); 
            }); 
            $("#hideBtn_1").click(function () { 
                $("#rightPop").popover("hide"); 
            }); 
            $("#hideBtn_2").click(function () { 
                $("#bottomPop").popover("hide"); 
            }); 
        }); 
    </script> 
</body> 
  
</html>

Output:

Bootstrap 5 Popovers hide() Method

HTML

HTML

Please Login to comment...

Similar Reads

What kind of Experience do you want to share?