Bootstrap 5 Popovers Dismiss on next click
Last Updated :
05 Dec, 2022
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=
rel="stylesheet">
<script src=
</script>
<script src=
</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=
rel="stylesheet">
<script src=
</script>
<script src=
</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
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...