Bootstrap 5 Popovers getInstance() Method

Last Updated : 29 Jul, 2024

Bootstrap 5 Popover getInstance() method is used to get the already existing instance of the bootstrap Popover and return that instance to the caller. This method does not create a new popover instance. The caller can use the instance to perform other tasks or to call other methods of the popover component.

Syntax:

bootstrap.Popover.getInstance("#element");

Parameters:

This method accepts an HTML element or the selector of an element as its parameter.

Return Value:

This method returns the instance of the popover associated with the element that passes using the parameter.

Example 1: In this example, we used the getInstance() method of the popover to get the popover instance and then call its show() and hide() methods to make control its visibility.

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/@popperjs/[email protected]/dist/umd/popper.min.js">
    </script>
    <script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js">
    </script>
</head>

<body>
    <div class="container">
        <div class="mt-4">
            <h1 class="text-success">GeeksforGeeks</h1>
            <strong>
                Bootstrap 5 Popover getInstance() Method
            </strong>
        </div>

        <div>
            <button 
                id="gfg" 
                type="button" 
                class="btn btn-secondary mt-3" 
                data-bs-container="body" 
                data-bs-toggle="popover"
                data-bs-content="Welcome Geeks!">
                Button with Popover
            </button>
            <br> 

            <button 
                type="button" 
                class="btn btn-success mt-4" 
                onclick="getInstanceANDShowPopover()">
                getInstance And Show Popover
            </button>

            <button 
                type="button" 
                class="btn btn-danger mt-4" 
                onclick="getInstanceANDHidePopover()">
                getInstance And Hide Popover
            </button>
        </div>
    </div>

    <script>
        new bootstrap.Popover(document.querySelector("#gfg"));
        function getInstanceANDShowPopover() {
            bootstrap.Popover.getInstance("#gfg").show();
        }

        function getInstanceANDHidePopover() {
            bootstrap.Popover.getInstance("#gfg").hide();
        }
    </script>
</body>

</html>

Output:

Example 2: In this example, we used the getInstance() method of the popover to get the popover instance and then call its toggle() method to toggle its visibility using the button.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Bootstrap 5</title>

    <link href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" 
        rel="stylesheet">
    <script src=
"https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js">
    </script>
    <script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js">
    </script>
</head>

<body>
    <div class="container">
        <h1 class="text-success">GeeksforGeeks</h1>
        <strong>Bootstrap 5 Popover getInstance() Method</strong>
    
        <div>
            <button 
                id="gfg" 
                type="button" 
                class="btn btn-secondary mt-3" 
                data-bs-container="body" 
                data-bs-toggle="popover"
                data-bs-content="Welcome Geeks!">
                Button with Popover
            </button>
            <br> 

            <button 
                type="button" 
                class="btn btn-success mt-4" 
                onclick="getInstanceANDTogglePopover()">
                getInstance And Toggle Popover Visibility
            </button>
        </div>
    </div>

    <script>
        new bootstrap.Popover(document.querySelector("#gfg"));
        function getInstanceANDTogglePopover() {
            bootstrap.Popover.getInstance("#gfg").toggle();
        }
    </script>
</body>

</html>