A Bootstrap popover is a UI component that resembles iOS popovers. You can add popovers to any HTML element on your webpage. Here's an example:
<span data-bs-toggle="popover" data-bs-container="body" data-bs-trigger="hover focus" data-bs-content="Popover default">Default</span>
<span data-bs-toggle="popover" data-bs-container="body" data-bs-trigger="hover focus" data-bs-placement="top" data-bs-content="Popover on the top">Top</span>
<span data-bs-toggle="popover" data-bs-container="body" data-bs-trigger="hover focus" data-bs-placement="right" data-bs-content="Popover on the right">Right</span>
<span data-bs-toggle="popover" data-bs-container="body" data-bs-trigger="hover focus" data-bs-placement="left" data-bs-content="Popover on the left">Left</span>
<span data-bs-toggle="popover" data-bs-container="body" data-bs-trigger="hover focus" data-bs-placement="bottom" data-bs-content="Popover on the bottom">Bottom</span>
<script>
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function(popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl)
})
</script>