Bootstrap 5 Popovers getInstance() Method

Last Updated : 13 Jan, 2023

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.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <title>Bootstrap 5</title> 
  
    <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"> 
        <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>