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 →