Bootstrap UI Kit

Top Popover

<button type="button" class="btn btn-primary"
        data-bs-toggle="popover" data-bs-placement="top"
        data-bs-title="Top Popover"
        data-bs-content="This popover appears above the trigger.">
    Click for Top
</button>

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

Bottom Popover

<button type="button" class="btn btn-outline-primary"
        data-bs-toggle="popover" data-bs-placement="bottom"
        data-bs-title="Bottom Popover"
        data-bs-content="This popover appears below the trigger.">
    Click for Bottom
</button>

All Four Placements

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

Popover with HTML Content

<button type="button" class="btn btn-primary"
        data-bs-toggle="popover" data-bs-placement="right" data-bs-html="true"
        data-bs-title="<strong>Rich Content</strong>"
        data-bs-content="<em>HTML</em> is <u>supported</u> inside popovers!">
    Rich Popover
</button>

Dismissible Popover

<button type="button" class="btn btn-dark"
        data-bs-toggle="popover" data-bs-trigger="focus" data-bs-placement="top"
        data-bs-title="Dismissible"
        data-bs-content="Click outside to close this popover.">
    Focus Trigger
</button>

Hover Popover

<button type="button" class="btn btn-info text-white"
        data-bs-toggle="popover" data-bs-trigger="hover" data-bs-placement="top"
        data-bs-content="Appears on hover — no click needed.">
    Hover Me
</button>

Popovers