Bootstrap Popover

HTML

<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>