|
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/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet" integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
<script src=
"https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet" integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
<script src=
"https://cdn.jsdelivr.net/npm/[email protected]/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>
Output:
Reference: https://getbootstrap.com/docs/5.0/components/popovers/#disable
|
.gif){kind=small}
Bootstrap 5 Modal Usage
Bootstrap 5 Overview Disabled forms
Bootstrap 5 List group JavaScript behavior
Bootstrap 5 List group SASS
Bootstrap 5 Breadcrumb Dividers