Why did the top , right , bottom , and left break up?

Because they couldn’t find any center!

What are Bootstrap Tooltips?

Bootstrap tooltips are small pop-up boxes that appear when users hover over, focus on, or tap an element. To create a tooltip, add the data-bs-toggle="tooltip" attribute to an HTML element and use the title attribute to specify the text that should appear.

HTML

<span data-bs-toggle="tooltip" title="Default">Default</span>
<span data-bs-toggle="tooltip" data-bs-placement="top" title="Top">Top</span>
<span data-bs-toggle="tooltip" data-bs-placement="right" title="Right">Right</span>
<span data-bs-toggle="tooltip" data-bs-placement="left" title="Left">Left</span>
<span data-bs-toggle="tooltip" data-bs-placement="bottom" title="Bottom">Bottom</span>

<script language="javascript">
$(function() {
$('[data-bs-toggle="tooltip"]').tooltip()
}) 
</script>