How can I fix the issue with the bootstrap tooltip not working properly on my Webflow site?
TL;DR
- Ensure Bootstrap JS, Popper.js, and (if using Bootstrap 4) jQuery are correctly loaded in Page Settings.
- Use proper tooltip HTML markup with the correct data attributes and a title.
- Manually initialize tooltips in the Footer using the appropriate JavaScript code based on your Bootstrap version.
- Avoid conflicts with Webflow's native tooltip features and check for console errors.
- If tooltip elements load dynamically, initialize tooltips after they are added to the DOM.
If your Bootstrap tooltip is not working on your Webflow site, it's likely due to missing dependencies, initialization issues, or conflicting scripts.
1. Confirm Bootstrap and jQuery Are Properly Loaded
- Tooltips require both Bootstrap's JS and Popper.js, plus jQuery if you're using Bootstrap 4 or earlier.
- Go to Page Settings > Custom Code and check that:
- Bootstrap’s JS and CSS files are linked correctly.
- Popper.js is included before Bootstrap JS.
- jQuery is on the page if you're using Bootstrap 4.
2. Use Correct HTML Markup
- Ensure your tooltip HTML elements have:
- The data-toggle="tooltip" attribute (or data-bs-toggle="tooltip" for Bootstrap 5).
- A title attribute containing the tooltip text.
Example (for Bootstrap 5):
<button type="button" data-bs-toggle="tooltip" title="Tooltip text">Hover me</button>
3. Initialize Tooltips with JavaScript
Webflow doesn’t auto-initialize Bootstrap tooltips, so you must do this manually.
In Page Settings > Custom Code > Footer, add:
For Bootstrap 5:
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));tooltipTriggerList.forEach(function (tooltipTriggerEl) { new bootstrap.Tooltip(tooltipTriggerEl); });
For Bootstrap 4:
$(function () { $('[data-toggle="tooltip"]').tooltip(); });
Ensure the script runs after Bootstrap JS is loaded, ideally in the Footer section.
4. Check for Webflow Conflicts
- Webflow adds custom scripts that might clash with Bootstrap.
- Avoid using Webflow-native tooltips on the same element as Bootstrap tooltips.
- Check in Browser Console (F12) for errors like “tooltip is not a function” — this usually means Bootstrap or jQuery isn’t loading correctly.
5. Ensure Elements Exist on Page Load
- If your tooltip elements are loaded dynamically (e.g., via interactions), initialize the tooltip after the content is added to the DOM.
Summary
To fix Bootstrap tooltips not working in Webflow: ensure Bootstrap, Popper.js, and (if needed) jQuery are included, use the correct tooltip markup, and initialize tooltips manually in the footer using the appropriate JavaScript. Also, avoid conflicts with Webflow’s built-in tooltip features.