Kenhuang Academy
  • English

      • Bootstrap Popovers

      Overview

      Popovers are similar to tooltips but can contain more content including titles and body text.

      Basic Popover

      <button type="button" class="btn btn-lg btn-danger" 
        data-bs-toggle="popover" 
        data-bs-title="Popover title"
        data-bs-content="Popover content goes here.">
    Click to toggle popover
</button>

<script>
const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]');
[...popoverTriggerList].map(el => new bootstrap.Popover(el));
</script>

      Directions

      <button data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Top popover">Top</button>
<button data-bs-toggle="popover" data-bs-placement="right" data-bs-content="Right popover">Right</button>
<button data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Bottom popover">Bottom</button>
<button data-bs-toggle="popover" data-bs-placement="left" data-bs-content="Left popover">Left</button>

      Dismissible Popover

      <a tabindex="0" class="btn btn-danger" 
   role="button" 
   data-bs-toggle="popover" 
   data-bs-trigger="focus"
   data-bs-title="Dismissible popover"
   data-bs-content="Click outside to dismiss">
    Dismissible popover
</a>

      HTML Content

      <button data-bs-toggle="popover" 
        data-bs-html="true"
        data-bs-title="<strong>HTML title</strong>"
        data-bs-content="<em>HTML</em> <u>content</u>">
    HTML popover
</button>

      Next Steps

      Next: Bootstrap Toasts →