Bootstrap 5 Popovers enable() Method

Bootstrap 5 Popovers are a feature that allows you to add small overlays of content to a page. They are typically used to provide additional information or to display a menu when a user hovers over or clicks on a specific element on the page. We can also pass the header and content in a popover.

Bootstrap 5 Popovers enable() method:

It is used to enable the element’s popover to be displayed.

Syntax:

popover.enable()

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

Let us understand more about this using example

Example 1: In this example, we will learn about enable() 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 enable() 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> 

    <script>
        const exampleEl = document.getElementById('example')
        const popover = new bootstrap.Popover(exampleEl)
        const enableButton = document.getElementById('enable')
        
        enableButton.addEventListener('click', () => {
            popover.enable()
        })
    </script>
</body>
</html>

Output:

Example 2: In this example, we will see the working of disable() with enable() method. When we will disable a popover, the popover will not appear. To enable the popover, we need to enable it by clicking the button.

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 enable() 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()
        })
    </script>
</body>

</html>

Output:

Reference: https://getbootstrap.com/docs/5.0/components/popovers/#enable

Bootstrap 5 Popovers enable() Method

Explore