Bootstrap 5 Popovers hide() Method

Last Updated : 30 Jul, 2024

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/[email protected]/dist/css/bootstrap.min.css" 
          rel="stylesheet">
    <script src=
"https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/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/[email protected]/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:

Reference: https://getbootstrap.com/docs/5.0/components/popovers/#hide

Bootstrap 5 Popovers SASS

priyanshuchatterjee01

Improve

Article Tags :

Bootstrap 5 Popovers hide() Method

Similar Reads

Thank You!

What kind of Experience do you want to share?