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 =
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:
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
Share your thoughts in the comments
Please Login to comment...