Bootstrap 5 Popovers Methods Last Updated : 31 Jul, 2024 Comments Improve Suggest changes Like Article Like Report Bootstrap 5 Popovers methods enable manual control over the visibility of popover elements, allowing users to show or hide them as needed, enhancing interactivity and customization options within web applications.Bootstrap 5 Popovers Methods:MethodDescriptiontoggleToggles the visibility of a popover element.showShows a popover element.hideHides a popover element.disposeDisposes of a popover element.enableEnables a popover element to be visible.disableDisables a popover element from being visible.toggleEnabledToggles a popover element's ability to be visible.updateUpdates the position of a popover element.getInstanceStatic method to get the popover element associated with the DOM.getOrCreateInstanceStatic method to get the popover element associated with the DOM, or create a new one if it doesn't exist.Syntax:myPopover.popover_method()Let us understand more about this using some examples below:Example 1: In this example, we will show and hide the popover element using the "show" and "hide" methods given by the Bootstrap 5 Popover object. 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 href= "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity= "sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> </head> <body class="m-3"> <h1 > Bootstrap 5 Popover object </h1> <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> <script src= "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity= "sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script> <script> const exampleEl = document.getElementById('example'); const popover = new bootstrap.Popover(exampleEl); const showButton = document.getElementById('showButton'); const hideButton = document.getElementById('hideButton'); showButton.addEventListener('click', () => { popover.show(); }); hideButton.addEventListener('click', () => { popover.hide(); }); </script> </body> </html> Output:Bootstrap 5 Popovers Methods Example OutputExample 2: In this example, we will toggle and dispose of the popover element using the "toggle" and "dispose" methods given by the Bootstrap 5 Popover object. Once we dispose of a popover element, we cannot use any methods given by the Bootstrap 5 Popover object as it gets destroyed in the DOM. 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 href= "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity= "sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> </head> <body class="m-3"> <h1> Bootstrap 5 Popovers </h1> <button type="button" id="example" data-bs-content="Top popover" data-bs-placement="bottom"> Popover element </button> <button type="button" id="toggleButton"> Toggle popover </button> <button type="button" id="disposeButton"> Dispose popover </button> <script src= "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity= "sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script> <script> document.addEventListener('DOMContentLoaded', function () { const exampleEl = document.getElementById('example'); const popover = new bootstrap.Popover(exampleEl); const toggleButton = document.getElementById('toggleButton'); const disposeButton = document.getElementById('disposeButton'); toggleButton.addEventListener('click', () => { popover.toggle(); }); disposeButton.addEventListener('click', () => { popover.dispose(); }); }); </script> </body> </html> Output:Bootstrap 5 Popovers Methods Example Output Comment More infoAdvertise with us Next Article Bootstrap 5 Popovers show() Method D dishebhbhayana Follow Improve Article Tags : Technical Scripter Web Technologies Bootstrap Technical Scripter 2022 Bootstrap-5 +1 More Similar Reads Bootstrap 5 Popovers Bootstrap 5 Popovers Provides directional placement options (top, bottom, left, right), dismiss on click, and support for disabled elements. Styled with Sass, they feature various methods, options, and events for dynamic interaction and customization. Bootstrap 5 Popovers: AspectDescriptionFour dire 2 min read Bootstrap 5 Popovers Four directions The popover is a bootstrap component used to mainly add additional information to a website. It is a pop-up box that appears when the user clicks on an element. Using bootstrap attributes, It can be aligned in any of the four directions left, top, right, and bottom. Bootstrap 5 Popovers Four directi 3 min read Bootstrap 5 Popovers Dismiss on next click The popover is an attribute of bootstrap used to make the website look more effective. Popovers are mainly used to display additional information and are displayed with the click of the mouse pointer on a button. Popovers can be dismissed on the user’s next click of a different element than the togg 2 min read Bootstrap 5 Popovers Disabled Elements Bootstrap 5 Popovers are an amazing way to show some quick information when hovered over a button or anchor or span tag. In popovers, there exists an option to disable the popover element. Disabling the element essentially means that the popover won't work anymore. The disabling is mainly done using 2 min read Bootstrap 5 Popovers SASS Bootstrap 5 Popovers SASS has a set of variables that are usually set to a default value but it can be changed accordingly to customize the Popover.SASS variable of Popovers: SASS variables and their default values:$popover-font-size ($font-size-sm): This variable is used to change the font size of 5 min read Bootstrap 5 Popovers Usage Bootstrap 5 popover is similar to the tooltips which have a pop-up box that appears when we click the element. We can insert the content into the popover box by using the attribute called "data-bs-content". We can also include interactive controls. Bootstrap 5 Popovers Usage Events: Options: Options 2 min read Bootstrap 5 Popovers Options Bootstrap 5 Popovers are small overlays that can be displayed on top of content to provide additional context or action options. Popover option are used to perform the specific function on the element. Options can be passed through the data attributes or java script. To pass the data attributes we S 3 min read Bootstrap 5 Popovers Using function with popperConfig Options Bootstrap 5 Popover is a feature of Bootstrap that allow you to display a small popup over the element when an element is clicked or hovered over. Bootstrap 5 Popovers Using function with popperConfig Options: Popover popperConfig option is used to customize the behavior of the popover. The popperCo 2 min read Bootstrap 5 Popovers Methods Bootstrap 5 Popovers methods enable manual control over the visibility of popover elements, allowing users to show or hide them as needed, enhancing interactivity and customization options within web applications.Bootstrap 5 Popovers Methods:MethodDescriptiontoggleToggles the visibility of a popover 2 min read Bootstrap 5 Popovers show() Method Bootstrap 5 Popovers show() method is used to open the popover manually. It will show the popover before the actual shown.bs.popover event occurs. Syntax: popover.show() Return value: This method will manually trigger the element’s popover to be displayed. Example 1: In this example, we will learn a 2 min read Like