Bootstrap 5 Popovers enable() Method
Last Updated :
30 Jan, 2023
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 =
rel = "stylesheet" integrity =
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin = "anonymous" >
< script src =
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 =
rel = "stylesheet" integrity =
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin = "anonymous" >
< script src =
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
Share your thoughts in the comments
Please Login to comment...