Introduction to Bootstrap 5 Tooltips

• data-bs-toggle=”tooltip” → Enables tooltip functionality
• title=”Tooltip Text” → Defines the tooltip content
• data-bs-placement=”top|right|bottom|left” → Specifies tooltip position

Example: Basic Tooltip

JavaScript Code:

To Enable Tooltip Functionality in Bootstrap we need to add below JavaScript Code with each Bootstrap Tooltip Classes:

<!-- Enable Bootstrap 5 Tooltips -->
<script>
  document.addEventListener("DOMContentLoaded", function () {
    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
    var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
      return new bootstrap.Tooltip(tooltipTriggerEl);
    });
  });
</script>

Bootstrap Code:

<!-- Tooltip Example -->
<button type="button" class="btn btn-primary" data-bs-toggle="tooltip" title="This is a tooltip!">
  Hover over me
</button>

Explanation:

• The JavaScript snippet initializes all tooltips on the page.
• The title attribute contains the tooltip text.
• data-bs-toggle=”tooltip” enables Bootstrap tooltip functionality.