Bootstrap 5 Popovers disable() Method

Last Updated : 30 Jan, 2023

Bootstrap 5 popover disable() method is used to disable the element’s popover to be displayed. Popover can only be displayed when it is enabled with the help of the required method.

Syntax:

popover.disable()

Return Value: This method disables the element’s popover to be displayed

Let us understand more about this using example

Example 1: In this example, we will learn about disable() method.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
     <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> 
    <h2>Bootstrap 5 Popovers disable() method</h2> 
    <button type="button" id="example" 
            data-bs-content="Popover is Enabled" 
            data-bs-placement="bottom"
            class="btn btn-info"> 
        Popover element 
    </button> 
   
    <button type="button" id="disable" class="btn btn-danger"> 
        Disable Popover using this Button 
    </button> 
  
    <script> 
        const exampleEl = document.getElementById('example') 
        const popover = new bootstrap.Popover(exampleEl) 
  
        const disableButton = document.getElementById('disable') 
         
        disableButton.addEventListener('click', () => { 
            popover.disable() 
            alert("Popover is disabled") 
        }) 
    </script> 
</body> 
  
</html>

Output:

Example 2: In this example, we will see the working of disable() method. When we will disable a popover, it will not appear.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <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> 
    <h2>Bootstrap 5 Popovers disable() Method</h2> 
    <button type="button" id="example" 
            data-bs-content="Popover is Enabled" 
            data-bs-placement="bottom"
        class="btn btn-info"> 
        Popover element 
    </button> 
    <button type="button" id="enable" class="btn btn-success"> 
        Enable Popover using this Button 
    </button> 
    <button type="button" id="disable" class="btn btn-danger"> 
        Disable Popover using this Button 
    </button> 
    <script> 
        const exampleEl = document.getElementById('example') 
        const popover = new bootstrap.Popover(exampleEl) 
        const enableButton = document.getElementById('enable') 
        const disableButton = document.getElementById('disable') 
        enableButton.addEventListener('click', () => { 
            popover.enable() 
        }) 
        disableButton.addEventListener('click', () => { 
            popover.disable() 
            alert("Popover is disabled") 
        })     
    </script> 
</body> 
  
</html>