Bootstrap – Popovers
”; Previous Next
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/[email protected]/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/[email protected]/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/[email protected]/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/[email protected]/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/[email protected]/dist/css/bootstrap.min.css” rel=”stylesheet”>
<script src=”https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/dist/css/bootstrap.min.css” rel=”stylesheet”>
<script src=”https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/dist/css/bootstrap.min.css” rel=”stylesheet”>
<script src=”https://cdn.jsdelivr.net/npm/[email protected]/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.