Bootstrap 5 Popovers toggleEnabled() Method
Bootstrap 5 Popovers toggleEnabled() method is used to toggle between the enabled and disabled state of the popover. When the popover is in a disabled state, it cannot be shown or hidden.
Syntax:
popOver.toggleEnabled();
Parameters: The toggleEnabled method does not require any parameter.
Return Value: The toogleEnabled method does not return any value back to the caller.
Example 1: In this example, we used the toggleEnabled method to toggle between the enabled and disabled state of the popover element.
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 rel="stylesheet" href= <script src= </script> <script src= </script> </head> <body> <div class="container"> <div class="mt-4"> <h1 class="text-success"> GeeksforGeeks </h1> <strong> Bootstrap 5 Popovers toggleEnabled() Method </strong> </div> <button class="btn btn-danger my-4" onclick="toggleStateofPopover()"> toggleEnable </button> <div class="card w-25" id="popover1" data-bs-toggle="popover" data-bs-content="GeeksforGeeks is Awesome."> <div class="card-body"> Click this card to show the popover if it is enabled. </div> </div> <h5 class="mt-4" id="state">Enabled</h5> <script> const el = document.getElementById('popover1'); const popOver = new bootstrap.Popover(el); function toggleStateofPopover() { var status = document.getElementById('state'); popOver.toggleEnabled(); if (status.innerText == "Enabled") { status.innerText = "Disabled"; } else { status.innerText = "Enabled"; } } </script> </div> </body> </html> |
Output:
Example 2: In this example, we used the popover toggleEnabled method with its disable and enable methods.
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 rel="stylesheet" href= <script src= </script> <script src= </script> </head> <body> <div class="container"> <div class="mt-4"> <h1 class="text-success"> GeeksforGeeks </h1> <strong> Bootstrap 5 Popovers toggleEnabled() Method </strong> </div> <button class="btn btn-danger my-4" onclick="toggleStateofPopover()"> toggleEnable </button> <button class="btn btn-success my-4" onclick="enable()"> Enable </button> <button class="btn btn-danger my-4" onclick="disable()"> Disable </button> <div class="card w-25" id="popover1" data-bs-toggle="popover" data-bs-content="GeeksforGeeks is Awesome."> <div class="card-body"> Click this card to show the popover if it is enabled. </div> </div> <h5 class="mt-4" id="state">Enabled</h5> <script> const el = document.getElementById('popover1'); const popOver = new bootstrap.Popover(el); var state = document.getElementById('state'); function enable() { if (state.innerText == "Disabled") { popOver.enable(); state.innerText = "Enabled"; } } function disable() { if (state.innerText == "Enabled") { popOver.disable(); state.innerText = "Disabled"; } } function toggleStateofPopover() { popOver.toggleEnabled(); if (state.innerText == "Enabled") { state.innerText = "Disabled"; } else { state.innerText = "Enabled"; } } </script> </div> </body> </html> |
Output:
Reference: https://getbootstrap.com/docs/5.0/components/popovers/#toggleenabled
Please Login to comment...