Tooltip - Bootstrap 5

For adding custom Bootstrap tooltips with CSS and JavaScript using CSS3 for animations and data-bs-attributes for local title storage.

• You must include bootstrap.bundle.min.js which contains Popper.
• Tooltips are opt-in for performance reasons, so you must initialize them yourself.
• Tooltips with zero-length titles are never displayed.

Example 1: Bootstrap 5 Tooltip.

<p class="muted">Placeholder text to demonstrate some <a href="#" data-bs-toggle="tooltip" data-bs-title="Default tooltip">inline links</a> with tooltips. This is now just filler, no killer. Content placed here just to mimic the presence of <a href="#" data-bs-toggle="tooltip" data-bs-title="Another tooltip">real text</a>. And all that just to give you an idea of how tooltips would look when used in real-world situations. So hopefully you've now seen how <a href="#" data-bs-toggle="tooltip" data-bs-title="Another one here too">these tooltips on links</a> can work in practice, once you use them on <a href="#" data-bs-toggle="tooltip" data-bs-title="The last tip!">your own</a> site or project.</p>
<script>
const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
</script>

You can customize the appearance of tooltips using CSS variables data-bs-custom-class="custom-tooltip"

Example 2: Bootstrap Tooltip with custom class.

.custom-tooltip {
    --bs-tooltip-bg: var(--bs-primary);
}
		
<button type="button" class="btn btn-secondary"
	data-bs-toggle="tooltip" data-bs-placement="top"
	data-bs-custom-class="custom-tooltip"
	data-bs-title="This top tooltip is themed via CSS variables.">
  Custom tooltip
</button>

Hover over the buttons below to see the four tooltips directions: top, right, bottom, and left.

Example 3: Bootstrap tooltip with four directions

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Tooltip on top">
  Tooltip on top
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="Tooltip on right">
  Tooltip on right
<button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Tooltip on bottom">
  Tooltip on bottom
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left" data-bs-title="Tooltip on left">
  Tooltip on left
</button>