MENU


Popover

A Popover is just like a tooltip, except that the message is displayed only on a click. Like Tooltips, they must be initialized before use:

var popoverList = [].slice.call(document.querySelectorAll('[data-toggle="popover"]')); var popoverList = popoverList.map(function (popoverEl) { return new bootstrap.Popover(popoverEl); })
Once shown, a Popover will be hidden on a subsequent click on the element.
RESETRUNFULL
<!DOCTYPE html><html>
<head><link href='https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css' rel='stylesheet' integrity='sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor' crossorigin='anonymous'>
      <script src='https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js' integrity='sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2' crossorigin='anonymous'></script>
      <style>div:not(.container):not(.tooltip):not(.tooltip *):not(.navbar *):not(.carousel-caption):not(.card *):not(.form-check):not(.input-group) { border:1px solid grey; text-align:center; }</style>
</head><body>

   <button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">
      Click to toggle popover
   </button>
   <script>
      var popoverList = [].slice.call(document.querySelectorAll('[data-toggle="popover"]'));
      var popoverList = popoverList.map(function (popoverEl) {
          return new bootstrap.Popover(popoverEl);
      });
   </script>

</body><html>
A dismissable popover will be hidden only if the subsequent click is outside the element.
RESETRUNFULL
<!DOCTYPE html><html>
<head><link href='https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css' rel='stylesheet' integrity='sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor' crossorigin='anonymous'>
      <script src='https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js' integrity='sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2' crossorigin='anonymous'></script>
      <style>div:not(.container):not(.tooltip):not(.tooltip *):not(.navbar *):not(.carousel-caption):not(.card *):not(.form-check):not(.input-group) { border:1px solid grey; text-align:center; }</style>
</head><body>

   <a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">
      Dismissible popover
   </a>
   <script>
      var popoverList = [].slice.call(document.querySelectorAll('[data-toggle="popover"]'));
      var popoverList = popoverList.map(function (popoverEl) {
          return new bootstrap.Popover(popoverEl);
      });
   </script>

</body><html>

Bootstrap popovers accept the same options, methods and events as Bootstrap tooltips:

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="yeah!"> Popover on right </button>var pEle = document.getElementById('element'); var popover=new bootstrap.Popover(pEle, options);popover.toggle();var pEle = document.getElementById('element'); pEle.addEventListener('hidden.bs.popover', function () { // do something... });