Bootstrap 5 Popovers getInstance() Method

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/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">
        <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.