”;
This chapter will discuss about popovers in Bootstrap. A popover typically contains additional information, context, or actions related to the triggering element.
The popover may contain text, images, links, buttons, or other content, depending on its purpose and context. Bootstrap provides built-in popover components that can be easily integrated into web applications.
Things to remember while using the popover plug-in:
- As popovers depend on Popper.js, a third party library, for positioning, you must include popper.min.js before bootstrap.js.
- As a dependency, the popovers require the popover plugin.
- You must initialize the popovers first, as popovers are opt-in for performance reasons.
- A popover will never be shown for a zero-length title and content values.
- Triggering popovers will not work on hidden elements.
- Popovers for .disabled or disabled elements must be triggered using a wrapper element.
- To avoid getting popovers centered between the anchors” overall width, use white-space: nowrap; on the <a>
- Before removing any element from the DOM, you must hide the popovers corresponding to them.
Enable Popovers
Initialize all the popovers on a page, by their data-bs-toggle attribute
const popoverTriggerList = document.querySelectorAll(''[data-bs-toggle="popover"]'')
const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))
Creating a Popover
Add the data-bs-toggle=”popover” attribute to an element, to create a popover.
-
The data-bs-toggle attribute defines the popover.
-
The title attribute defines the title of the popover
-
The data-content attribute defines the content to be shown in the respective popover.
Example
Let”s see an example of creating a popover:
You can edit and try running this code using the Edit & Run option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Popover</title>
<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/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<h4>Bootstrap creation</h4><br><br>
<button type="button" class="btn btn-primary"
data-bs-toggle="popover" data-bs-placement="top"
data-bs-title="Popover"
data-bs-content="It is a new popover.">
Click to view popover
</button>
<script>
const popoverTriggerList = document.querySelectorAll(''[data-bs-toggle="popover"]'')
const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))
</script>
</body>
</html>
Positioning of a Popover
There are four options available for the positioning of the popover: left, right, top and bottom aligned.
By default, the popover will appear on the right of the element.
The data-bs-placement attribute is used to set the position of the popover.
Example
Let”s see an example of setting the position of a popover:
You can edit and try running this code using the Edit & Run option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Popovers</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<h4>Positioning of Popover</h4>
<br><br><br>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Top popover">
Popover on top
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="Right popover">
Popover on right
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Bottom popover">
Popover on bottom
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="Left popover">
Popover on left
</button>
<script>
const popoverTriggerList = document.querySelectorAll(''[data-bs-toggle="popover"]'')
const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))
</script>
</body>
</html>
Custom popovers
The appearance of popovers can be customized using a custom class data-bs-custom-class=”custom-popover”.
Example
Let”s see an example of creating a custom popover:
You can edit and try running this code using the Edit & Run option.
<!DOCTYPE html>
<html lang="en">
<head&>
<title>Bootstrap - Popovers</title>
<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/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<h4>Custom Popover</h4><br><br>
<!-- Define custom container -->
<button type="button" class="btn btn-primary"
data-bs-toggle="popover" data-bs-placement="top"
data-bs-custom-class="custom-popover"
data-bs-title="Custom popover"
data-bs-content="It is a custom popover.">
Custom popover
</button>
<script>
const popoverTriggerList = document.querySelectorAll(''[data-bs-toggle="popover"]'')
const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))
</script>
</body>
</html>
Dismissible Popover
The popover gets closed when the same element is clicked again, by default. However, the attribute data-bs-trigger=”focus” can be used, which will close the popover when clicking outside the element.
For the popover to be dismissed on the next click, it is necessary to use specific HTML code that ensures consistent behavior across different browsers and platforms
Example
Let”s see an example of dismissible popover:
You can edit and try running this code using the Edit & Run option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Dismissible Popover</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h4>Dismissed on next click - Popover</h4><br>
<a href="#" title="Dismissible popover" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-content="Click anywhere in the document to close this popover">Click me</a>
</div>
<script>
const popoverTriggerList = document.querySelectorAll(''[data-bs-toggle="popover"]'')
const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))
</script>
</body>
</html>
Hovering of a Popover
When the mouse pointer is moved over an element and you want a popover to appear on hovering, use the data-bs-trigger=”hover” attribute.
Example
Let”s see an example of a hovering popover:
You can edit and try running this code using the Edit & Run option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Popover on hover</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h4>Hoverable Popover</h4><br>
<a href="#" title="Header" data-bs-toggle="popover" data-bs-trigger="hover" data-bs-content="Popover text">Hover over me</a>
</div>
<script>
const popoverTriggerList = document.querySelectorAll(''[data-bs-toggle="popover"]'')
const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))
</script>
</body>
</html>
Popover on disabled elements
For popovers on disabled elements, you may prefer data-bs-trigger=”hover focus” so that the popover appears as immediate visual feedback to your users as they may not expect to click on a disabled element.
Example
Let”s see an example of a popover on disabled element:
You can edit and try running this code using the Edit & Run option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Popovers</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<h4>Popover on Disabled Element</h4><br>
<span class="d-inline-block" tabindex="0" data-bs-toggle="popover" data-bs-trigger="hover focus" data-bs-content="Disabled popover">
<button class="btn btn-primary" type="button" disabled>Disabled button</button>
</span>
<script>
const popoverTriggerList = document.querySelectorAll(''[data-bs-toggle="popover"]'')
const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))
</script>
</body>
</html>
Options
-
An option name can be appended to the class data-bs- and that option can be passed as an attribute, such as data-bs-boundary=”{value}”.
-
When passing the options via data attributes, make sure to change the case type to “kebab-case” from “camelCase”, such as use data-bs-fallback-placements=”[array]” instead of data-bs-fallbackPlacements=”[array]”.
Example
Here is an example of options added as an attribute to .data-bs- class:
You can edit and try running this code using the Edit & Run option.
<!DOCTYPE html>
<html lang="en">
<head&>
<title>Bootstrap Popovers - Options</title>
<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/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<h4>Popover options</h4><br>
<button type="button" class="btn btn-lg btn-success" data-bs-toggle="popover" data-bs-title ="Title added through options and that overrides the title provided" title="Popover description" data-content="Popover desc">Click Me to view</button>
<br><br>
<script>
const popoverTriggerList = document.querySelectorAll(''[data-bs-toggle="popover"]'')
const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))
</script>
</body>
</html>
The table given below shows the various options provided by Bootstrap, to be appended to the class .data-bs- as a data attribute.
| Name | Type | Default | Description |
|---|---|---|---|
| allowList | object | default value | Object that contains allowed attributes and tags. |
| animation | boolean | true | A CSS fade transition is applied to the popover. |
| boundary | string, element | ”clippingParents” | By default, it’s ”clippingParents” and can accept an HTML Element reference (via JavaScript only). |
| container | string, element, false | false | Appends the popover to a specific element. |
| customClass | string, function | ”” | These classes will be added in addition to any classes specified in the template. To add multiple classes, separate them with spaces: ”class-1 class-2”. |
| delay | number, object | 0 | Delay showing and hiding the popover(ms). Object structure is: delay: { “show”: 500, “hide”: 100 }. |
| fallbackPlacements | array | [”top”, ”right”, ”bottom”, ”left”] | Define fallback placements by providing a list of placements in array. |
| html | boolean | false | Allow HTML in the popover. |
| offset | array, string, function | [0, 0] | Offset of the popover relative to its target. Ex: data-bs-offset=”10,20″. |
| placement | string, function | ”top” | Decides the position of the popover. |
| popperConfig | null, object, function | null | To change Bootstrap’s default Popper config. |
| sanitize | boolean | true | Enable or disable the sanitization. |
| sanitizeFn | null, function | null | You can supply your own sanitize function. |
| selector | string, false | false | With a selector, popover objects will be delegated to the specified targets. |
| template | string | ”
” |
While creating a popover, use the base HTML. |
| title | string, element, function | ”” | It refers to the title of the popover. |
| trigger | string | ”hover-focus” | Shows how the popover is triggered: click, hover, focus, manual. |
”;