Bootstrap 5 Popover is an attribute in bootstrap that can be used to make any website look more dynamic. Popovers are generally used to display additional information about any element and are displayed with a click of a mouse pointer over that element.
The dispose() method is used to remove and destroy the popover element from the DOM itself. After using this method, the user will not be able to see the popover at all.
Syntax:
myPopover.dispose()
Return Value: This method removes stored data on the DOM element.
Let us understand more about this using some examples below:
Example 1: In this example, we will toggle the popover element’s visibility and then destroy the element using the dispose() method given by the Bootstrap 5 Popover object.
<!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 href =
rel = "stylesheet" integrity =
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin = "anonymous" >
< script src =
integrity =
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin = "anonymous" >
</ script >
</ head >
< body class = "m-2" >
< h1 style = "color:green" >GeeksforGeeks</ h1 >
< button type = "button" id = "example" data-bs-content = "Top popover" data-bs-placement = "bottom" >
Popover element
</ button >
< button type = "button" id = "disposeButton" >
Dispose popover
</ button >
< script >
// We will first get popover element used in the body tag
const exampleEl = document.getElementById('example')
const popover = new bootstrap.Popover(exampleEl)
// We will get the buttons that call the popover methods
const disposeButton = document.getElementById('disposeButton')
disposeButton.addEventListener('click', () => {
// we will dispose the popover element here
popover.dispose()
})
</ script >
</ body >
</ html >
|
Output:
Example 2: In this example, we will show and hide the popover element’s visibility and then destroy the element using the “show”, “hide” and “dispose” methods given by the Bootstrap 5 Popover object.
<!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 href =
rel = "stylesheet" integrity =
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin = "anonymous" >
< script src =
integrity =
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin = "anonymous" >
</ script >
</ head >
< body class = "m-2" >
< h1 class = "text-success" >GeeksforGeeks</ h1 >
< h3 >Bootstrap 5 popover dispose() method</ h3 >
< button type = "button" id = "example" data-bs-content = "Top popover" data-bs-placement = "bottom" >
Popover element
</ button >
< button type = "button" id = "showButton" >
show popover
</ button >
< button type = "button" id = "hideButton" >
hide popover
</ button >
< button type = "button" id = "disposeButton" >
dispose popover
</ button >
< script >
// get popover element
const exampleEl = document.getElementById('example')
// Popover constructor to access the methods
const popover = new bootstrap.Popover(exampleEl)
// get the buttons that call the popover methods
const showButton = document.getElementById('showButton')
const hideButton = document.getElementById('hideButton')
const disposeButton = document.getElementById('disposeButton')
showButton.addEventListener('click', () => {
// show the popover element
popover.show()
})
hideButton.addEventListener('click', () => {
// hide the popover element
popover.hide()
})
disposeButton.addEventListener('click', () => {
// dispose the popover element
popover.dispose()
})
</ script >
</ body >
</ html >
|
Output:
Reference: https://getbootstrap.com/docs/5.0/components/popovers/#dispose