Why did the top break up with the bottom ?

Because they just couldn’t find common ground — left and right were always in the way!

What is a Bootstrap popover?

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:

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>