Bootstrap Tooltip

HTML

<span data-toggle="tooltip" title="Tooltip Content Default">Default</span>

<span data-toggle="tooltip" data-bs-placement="top" title="Tooltip Content Default">Top</span>
<span data-toggle="tooltip" data-bs-placement="right" title="Tooltip Content Right">Right</span>

<span data-toggle="tooltip" data-bs-placement="left" title="Tooltip Content Left">Left</span>
<span data-toggle="tooltip" data-bs-placement="bottom" title="Tooltip Content Bottom">Bottom</span>

Preview

Default

Top Right
Left Bottom

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