BootstrapDebug / FixBeginner · 3 min read

How to Fix Tooltip Not Showing in Bootstrap Quickly

Bootstrap tooltips won't show if you forget to initialize them with new bootstrap.Tooltip(element) or if the required JavaScript and CSS files are missing. Also, ensure the element has the correct data-bs-toggle="tooltip" attribute and that you call the initialization code after the page loads.

🔍

Why This Happens

Tooltips in Bootstrap require JavaScript to activate. If you only add the HTML attribute data-bs-toggle="tooltip" but do not initialize the tooltip with JavaScript, it will not appear. Also, missing Bootstrap JS or CSS files can cause the tooltip to fail silently.

html

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" title="Tooltip text">Hover me</button>

Output

No tooltip appears when hovering over the button.

🔧

The Fix

Include Bootstrap's CSS and JS files properly. Then, initialize the tooltip in JavaScript after the page loads. This activates the tooltip functionality on the element.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap Tooltip Fix</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" title="Tooltip text">Hover me</button>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  <script>
    const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
    tooltipTriggerList.forEach(tooltipTriggerEl => {
      new bootstrap.Tooltip(tooltipTriggerEl);
    });
  </script>
</body>
</html>

Output

A button labeled 'Hover me' that shows a tooltip with text 'Tooltip text' when hovered.

🛡️

Prevention

Always include Bootstrap CSS and JS files before using tooltips. Initialize tooltips with JavaScript after the DOM is ready. Use data-bs-toggle="tooltip" on elements that need tooltips. Test tooltips early to catch missing initialization.

⚠️

Related Errors

Tooltip shows but is empty: Check the title attribute is set.
Tooltip flickers or disappears: Ensure no conflicting CSS or JavaScript interferes.
Tooltip works only on click: Verify you are using Bootstrap 5 syntax and not legacy code.

✅

Key Takeaways

Always initialize Bootstrap tooltips with JavaScript after page load.

Include both Bootstrap CSS and JS files for tooltips to work.

Use the correct attribute data-bs-toggle="tooltip" on tooltip elements.

Test tooltips early to catch missing initialization or file issues.

Check the title attribute for tooltip text to display properly.