Bootstrap 5 Popovers Dismiss on next click Last Updated : 05 Dec, 2022 Comments Improve Suggest changes Like Article Like Report 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 toggle element by setting the trigger attribute to focus. Popovers Dismiss on next click used attribute: data-bs-trigger: This attribute tells how the popover will be triggered. Accepted values are click, hover, focus, and manual. Syntax: <button tabindex="0" class="btn" role="button" data-bs-toggle="popover" title="..." data-bs-trigger="focus" data-bs-content="..."> </button> Example 1: In this example, we set the data -bs-trigger attribute of the popover to focus, show the popover will hide when it loses focus. 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"> <title>Bootstrap 5 Popovers Dismiss on next click</title> <link href= "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> <script src= "https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"> </script> <script src= "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"> </script> </head> <body> <div class="container"> <div class="text-center"> <h1 class="text-success">GeeksforGeeks</h1> <h3>Bootstrap 5 Popovers Dismiss on next click</h3> </div> <div> <button tabindex="0" class="btn btn-lg btn-success" role="button" data-bs-toggle="popover" title="GFG Popover" data-bs-trigger="focus" data-bs-content= "This popover will hide when user clicks outside it."> GeeksforGeeks Popover dismiss on next click. </button> </div> </div> <script> var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]')) var popoverList = popoverTriggerList.map(function (popoverTriggerEl) { return new bootstrap.Popover(popoverTriggerEl) }) </script> </body> Output: Popovers dismiss on next click Example 2: In this example, we show the Bootstrap 5 Popovers Dismiss on the next click with left and right directions variations of the popover. 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"> <title>Bootstrap 5 Popovers Dismiss on next click</title> <link href= "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> <script src= "https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"> </script> <script src= "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"> </script> </head> <body> <div class="container text-center d-flex flex-column justify-content-center align-items-center"> <div class="text-center"> <h1 class="text-success">GeeksforGeeks</h1> <h5>Bootstrap 5 Popovers Dismiss on next click</h5> </div> <div> <button tabindex="0" class="btn btn-success d-block mt-4" role="button" data-bs-toggle="popover" title="GFG Popover" data-bs-trigger="focus" data-bs-placement="left" data-bs-content= "This popover will hide when user clicks outside it."> GeeksforGeeks Left Popover dismiss on next click. </button> <button tabindex="0" class="btn btn-warning d-block mt-4" role="button" data-bs-toggle="popover" title="GFG Popover" data-bs-trigger="focus" data-bs-placement="right" data-bs-content= "This popover will hide when user clicks outside it."> GeeksforGeeks Right Popover dismiss on next click. </button> </div> </div> <script> var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]')) var popoverList = popoverTriggerList.map(function (popoverTriggerEl) { return new bootstrap.Popover(popoverTriggerEl) }) </script> </body> Output: Popovers dismiss on next click Reference: https://getbootstrap.com/docs/5.0/components/popovers/#dismiss-on-next-click Comment More infoAdvertise with us Next Article Bootstrap 5 Popovers Disabled Elements P prashantrathore1159 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