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= rel="stylesheet"> <script src= </script> <script src= </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:
.gif)
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= rel="stylesheet"> <script src= </script> <script src= </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> |
Output:
Reference: https://getbootstrap.com/docs/5.0/components/popovers/#getinstance
Please Login to comment...