rlogwood/rails_templates

Find out if Bootstrap v5 has an alternative to loading jQuery for getting tooltips to work

Closed this issue · 1 comments

The only path I found for making bootstrap 5 tooltips work on the test page http://localhost:3000/bootstrap_test/index was to load jQuery and the template now supports this path.

Bootstrap 5 eliminates the jQuery dependency. The template needs to be updated to load the specific v5 javascript that will make tooltips work.

The template already includes the bootstrap javascript module in app/javascript/packs/application.js, but this, on it's own, wasn't enough to get tooltips working.

// import the bootstrap javascript module
import "bootstrap"

see https://getbootstrap.com/docs/5.0/components/tooltips/

Template updated to remove jQuery requirement for tooltips for bootstrap v5. the fix uses the following changes in app/javascript/packs/application.js

import "bootstrap"
import {Tooltip, Popover} from 'bootstrap'

document.addEventListener("turbolinks:load",() => {
   document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(element => new Tooltip(element))
   document.querySelectorAll('[data-bs-toggle="popover"]').forEach(element => new Popover(element))
});