Bootstrap 5 Popovers
Last Updated :
23 Dec, 2022
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:
- Four directions: We can specify where the popover should be placed on the page. You can choose from the top, bottom, left, and right, & can be dismissed on the next click. We can change the direction using data attribute data-bs-placement. By default, it is placed on the top of the element.
- Dismiss on next click: We can make popover dismiss on the user’s next click. To enable these features, we have to pass the data attribute data-bs-trigger =”focus”.
- Disabled elements: Disabled elements are not interactive with the user if we want to show the user any message on the disabled elements we can place a popover message on the element. As we cannot click the disabled button we have to make the popover message appear when the user hovers the pointer on the element to make this we have to use data-bs-trigger=”hover focus”.
- Sass: Syntactically Awesome style sheets Sass is a pre-processor scripting language that to interpreted into CSS. Sass is compatible with all versions of CSS. There is some variable that can be used to manipulate the style of the popover elements.
- Usage: The popover JavaScript code inserts in the popover element after triggering the popover element. And also generates the popover header and the content for the popover element.
- Options: Popover options are used to perform the specific function on the element. Options can be passed through the data attributes or javascript.
- Methods: Methods are used to add more functionality to the popover elements. The various methods of a Bootstrap 5 Popover element, are described below:
- show: It is used to reveal an element’s popover.
- hide: It is used to hide an element’s popover.
- toggle: It is used to toggle an element’s popover.
- dispose: It is used to remove and destroy the popover element from the DOM itself.
- enable: It is used to enable the element’s popover to be displayed.
- disable: It is used to disable the element’s popover from being displayed.
- toggleEnabled: It is used to toggle between the enabled and disabled state of the popover.
- update: It is used to update the position of an element’s popover.
- getInstance: It is a static method that permits retrieving the popover instance associated with a DOM element.
- getOrCreateInstance: It is a static method that permits retrieving the popover instance associated with a DOM element, or if not initialized then creating a new one.
- Events: When the method is called, the corresponding event occurs. There are some events like a show.bs.popover, shown.bs.popover, hide.bs.popover, hidden.bs.popover, inserted.bs.popover.
Example 1: This example describes the basic usage of the Popovers on an element in Bootstrap 5.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1">
<link href=
rel="stylesheet">
<script src=
</script>
</head>
<body class="text-center">
<h1 class="text-success">
GeeksforGeeks
</h1>
<h4>Bootstrap 5 Popover </h4>
<a href="#"
data-bs-toggle="popover"
title="GeeksforGeeks"
data-bs-trigger="focus">
popover
</a>
<script type="text/javascript">
var popoverTrigger =
[].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTrigger.map(function (popoverTrigger2) {
return new bootstrap.Popover(popoverTrigger2)
})
</script>
</body>
</html>
|
Output:
Example 2: This example illustrates the use of Bootstrap 5 Popovers by implementing the disabled element.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1">
<link href=
rel="stylesheet">
<script src=
</script>
</head>
<body>
<div class="container text-center">
<h1 class="text-success">
GeeksforGeeks
</h1>
<h3> Bootstrap 5 Popover </h3>
<span data-bs-toggle="popover"
data-bs-placement="bottom"
data-bs-content="popover on bottom"
data-bs-trigger="hover focus">
<button type="button"
class="btn btn-info" disabled>
Popover
</button>
</span>
</div>
<script type="text/javascript">
var popoverTrigger =
[].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTrigger.map(function (popoverTrigger2) {
return new bootstrap.Popover(popoverTrigger2)
})
</script>
</body>
</html>
|
Output:
Reference: https://getbootstrap.com/docs/5.0/components/popovers/
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...