Bootstrap 5 Popovers-ApiDemos™

Bootstrap 5 Popovers, The Popovers control is similar to a hint box in that it displays when the mouse clicks on the element, unlike a hint box it can display more content.

How to create Popovers

Popovers are created by adding data-bs-toggle="popover" to the element.

The content of the title attribute is the title of the Popovers, and the data-bs-content attribute shows the text content of the Popovers.

<button type="button" class="btn btn-primary" data-bs-toggle="popover" title="Popovers Title" data-bs-content="Popovers Content">Click me multiple times</button>

Note: Popovers are to be written in the initialization code of JavaScript.

The following examples allow Popovers to be used anywhere in the document.

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap5 demos</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h3>Popovers demo(apidemos)</h3>

  <button type="button" class="btn btn-primary" data-bs-toggle="popover" title="Popovers title" data-bs-content="Popovers content">
    Click me multiple times
  </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>

Output:

Bootstrap 5 Popovers

Specify the location of Popovers

By default Popovers are displayed on the right side of the element.

You can use the data-bs-placement property to set the direction in which Popovers are displayed: top, bottom, left or right:

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap5 demos</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h3>Specify the location of the pop-up box</h3>

  <a href="#" title="Title" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="I am the content part">top</a>
  <a href="#" title="Title" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="I am the content part">bottom</a>
  <a href="#" title="Title" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="I am the content part">left</a>
  <a href="#" title="Title" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="I am the content part">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>

Output:

Bootstrap 5 Popovers

Close Popovers

By default, Popovers are closed when the specified element is clicked again. You can use the data-bs-trigger="focus" attribute to set Popovers to be closed when the mouse clicks on the outer area of the element:

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap5 demos</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h3>Cancel pop-up box(apidemos.com)</h3>

  <a href="#" title="Cancel Popovers" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-content="Click elsewhere in the document to close me">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>

Output:

Bootstrap 5 Popovers

Note: If you want to implement an effect that shows up when the mouse is moved over the element and disappears when it is removed, you can use the data-bs-trigger property and set the value to "hover":

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap5 demos</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h3>Popovers demo(apidemos.com)</h3>

  <a href="#" title="title" data-bs-toggle="popover" data-bs-trigger="hover" data-bs-content="some content">Mouse 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>

Output:

Bootstrap 5 Popovers

Bootstrap 5 Popovers

How to create Popovers

Specify the location of Popovers

Close Popovers

Related

Top