Bootstrap 5 Popovers Methods

Last Updated : 05 Dec, 2022

Bootstrap 5 Popovers methods are used to control the visibility(i.e. hide or show) of a Bootstrap 5 Popover element, manually.

Bootstrap 5 Popovers Methods:

toggle: It is used to toggle the visibility of a popover element.
show: It is used to show a popover element.
hide: It is used to hide a popover element.
dispose: It is used to dispose of a popover element.
enable: It is used to give a popover element’s ability to be visible.
disable: It is used to disable a popover element’s ability to be visible.
toggleEnabled: It is used to toggle a popover element’s ability to be visible.
update: It is used to update the position of a popover element.
getInstance: It is a static method which is used to get the popover element associated with the DOM
getOrCreateInstance: It is a static method which is used to get the popover element associated with the DOM or create new one if it isn’t present.

Syntax:

myPopover.popover_method()

Let us understand more about this using some examples below:

Example 1: In this example, we will show and hide the popover element using the “show” and “hide” methods given by the Bootstrap 5 Popover object.

HTML

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content= 
"width=device-width, initial-scale=1.0">     
    <link href= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
        rel="stylesheet" integrity= 
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
        crossorigin="anonymous"> 
    <script src= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" 
            integrity= 
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" 
            crossorigin="anonymous"> 
    </script> 
</head> 
<body class="m-3"> 
    <h1 class="text-success"> 
        GeeksforGeeks 
    </h1> 
    <button type="button" id="example" 
            data-bs-content="Top popover" 
            data-bs-placement="bottom"> 
            Popover element 
    </button> 
    <button type="button" id="showButton"> 
      Show popover 
    </button> 
    <button type="button" id="hideButton"> 
      hide popover 
    </button> 
  
    <script> 
      const exampleEl = document.getElementById('example') 
      const popover = new bootstrap.Popover(exampleEl) 
      const showButton = document.getElementById('showButton') 
      const hideButton = document.getElementById('hideButton') 
  
      showButton.addEventListener('click', () => { 
        popover.show() 
      }) 
  
      hideButton.addEventListener('click', () => { 
        popover.hide() 
      }) 
    </script> 
</body> 
</html>

Output:

Example 2: In this example, we will toggle and dispose of the popover element using the “toggle” and “dispose” methods given by the Bootstrap 5 Popover object. Once we dispose of a popover element, we cannot use any methods given by the Bootstrap 5 Popover object as it gets destroyed in the DOM.

HTML

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content= 
"width=device-width, initial-scale=1.0">     
    <link href= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
          rel="stylesheet" integrity= 
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
          crossorigin="anonymous"> 
    <script src= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" 
            integrity= 
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" 
            crossorigin="anonymous"> 
    </script> 
</head> 
<body class="m-3"> 
    <h1 class="text-success"> 
        GeeksforGeeks 
    </h1> 
    <button type="button" id="example" 
            data-bs-content="Top popover" 
            data-bs-placement="bottom"> 
            Popover element 
    </button> 
    <button type="button" id="toggleButton"> 
      Toggle popover 
    </button> 
    <button type="button" id="disposeButton"> 
      Dispose popover 
    </button> 
  
    <script> 
      const exampleEl = document.getElementById('example') 
      const popover = new bootstrap.Popover(exampleEl) 
      const toggleButton = document.getElementById('toggleButton') 
      const disposeButton = document.getElementById('disposeButton') 
  
      toggleButton.addEventListener('click', () => { 
        popover.toggle() 
      }) 
  
      disposeButton.addEventListener('click', () => { 
        popover.dispose() 
      }) 
    </script> 
</body> 
</html>