Menu
Bootstrap 5 Popover
Popovers
The Popover component is similar to tooltips; it is a pop-up box that appears when the user clicks on an element. The difference is that the popover can contain much more content.
How To Create a Popover
To create a popover, add the data-bs-toggle="popover" attribute to an element.
Use the title attribute to specify the header text of the popover, and use the data-bs-content attribute to specify the text that should be displayed inside the popover’s body:
<button type=”button” class=”btn btn-primary” data-bs-toggle=”popover” title=”Popover Header” data-bs-content=”Some content inside the popover”>Toggle popover</button>
Note: Popovers must be initialized with JavaScript to work.
The following code will enable all popovers in the document:
Example
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Bootstrap Example</title>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css” rel=”stylesheet”>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js”></script>
</head>
<body>
<div>
<h3>Popover Example</h3>
<button type=”button” data-bs-toggle=”popover” title=”Popover Header” data-bs-content=”Some content inside the popover”>
Toggle popover
</button>
</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>
</html>
Positioning Popovers
By default, the popover will appear on the right side of the element.
Use the data-bs-placement attribute to set the position of the popover on top, bottom, left or the right side of the element:
Add Your Heading Text Here
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Bootstrap Example</title>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css” rel=”stylesheet”>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js”></script>
</head>
<body>
<div>
<h3>Popover Positioning</h3>
<p>Click on the links to see the popover in action:</p>
<a href=”#” title=”Header” data-bs-toggle=”popover” data-bs-placement=”top” data-bs-content=”Content”>Top</a>
<a href=”#” title=”Header” data-bs-toggle=”popover” data-bs-placement=”bottom” data-bs-content=”Content”>Bottom</a>
<a href=”#” title=”Header” data-bs-toggle=”popover” data-bs-placement=”left” data-bs-content=”Content”>Left</a>
<a href=”#” title=”Header” data-bs-toggle=”popover” data-bs-placement=”right” data-bs-content=”Content”>Right</a>
</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>
</html>
Closing Popovers
By default, the popover is closed when you click on the element again. However, you can use the data-bs-trigger="focus" attribute which will close the popover when clicking outside the element:
Example
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Bootstrap Example</title>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css” rel=”stylesheet”>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js”></script>
</head>
<body>
<div>
<h3>Dismissible Popover</h3>
<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>
var popoverTriggerList = [].slice.call(document.querySelectorAll(‘[data-bs-toggle=”popover”]’))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl)
})
</script>
</body>
</html>
Hoverable Popover
Tip: If you want the popover to be displayed when you move the mouse pointer over the element, use the data-bs-trigger attribute with a value of “hover“:
Example
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Bootstrap Example</title>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css” rel=”stylesheet”>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js”></script>
</head>
<body>
<div>
<h3>Hoverable Popover</h3>
<a href=”#” title=”Header” data-bs-toggle=”popover” data-bs-trigger=”hover” data-bs-content=”Popover text”>Hover over me</a>
</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>
</html>