Enable Bootstrap Tooltips in Rails 7

Question

I am switching my Rails 7 application (which currently uses Sprockets) to using the new jsbundling+esbuild approach. I cannot get Bootstrap's tooltip functionality to work, even though I think I am following the exact instructions.

This is the dependencies node in my package.json

  "dependencies": {
    "@popperjs/core": "2.11.5",
    "bootstrap": "5.2.0",
    "esbuild": "^0.18.11",
    "jquery": "3.6.0"
  },

This is my app/javascript/application.js

window.jQuery = window.$ = require('jquery');

require('@popperjs/core');
require('bootstrap');

$('body').tooltip({
  selector: '[data-bs-toggle="tooltip"]',
});

When I load my app in Chrome I get this error:

Uncaught TypeError: $(...).tooltip is not a function

I can't see how I can debug this, since I can't tell if it's a dependency not being met or an isolation issue, or something else.

Answer 1

Bootstrap 5 no longer relies on jQuery. So the tooltips are no longer enabled via a jQuery plugin.

You'll want to use the class based vanilla JavaScript plugin replacement.

var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
  return new bootstrap.Tooltip(tooltipTriggerEl)
})

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>

<button class="btn btn-primary m-2" data-bs-toggle="tooltip" title="Hello world" data-bs-placement="bottom">Bootstrap 5 Tooltip</button>

Here is the new documentation on tooltips, and more examples.

Answer 2

I managed to get Bootstrap 5 tooltips working in Rails 7.

Project setup

STEP 1: Create a new Rails 7 project with Bootstrap 5 added.

`C:\Users\xxxxx\Desktop\tmp>rails new my-app -j esbuild -c bootstrap`

STEP 2: Generate a controller for a new page called index.

`C:\Users\xxxxx\Desktop\tmp\my-app>rails g controller pages index`

STEP 3: Start the server.

`C:\Users\xxxxx\Desktop\tmp\my-app\bin>rails s`

STEP 4: Open http://127.0.0.1:3000/pages/home.

STEP 5: If you encounter the The asset "application.js" is not present in the asset pipeline. error, create a folder javascripts and inside create a file application.js. Restart the server.

STEP 6: Add the following code in application.js:

//= require popper
//= require bootstrap
//= require tooltips

STEP 7: Add the following code in manifest.js:

//= link_tree ../images
//= link_tree ../builds
//= link application.js

STEP 8: Create a file called tooltips.js inside the folder javascripts.

tooltips.js

document.addEventListener('DOMContentLoaded', function () {
  console.log('Initializing tooltips...');
  var tooltipTriggerList = [].slice.call(
    document.querySelectorAll('[data-bs-toggle="tooltip"]')
  );
  var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
    return new bootstrap.Tooltip(tooltipTriggerEl);
  });
});

STEP 9: Add the following code in index.html.erb:

<h1>Pages#index</h1>
<button type="button" class="btn btn-secondary my-4"
        data-bs-toggle="tooltip" data-bs-placement="top"
        data-bs-custom-class="custom-tooltip"
        data-bs-title="Tooltip works, yay! :)">
  Custom tooltip
</button>
<p>Find me in app/views/pages/index.html.erb</p>

Output

Other information

OS: Windows
Ruby version: 3.2.2
Rails version: 7.0.6

Project structure:

package.json

{
  "name": "app",
  "private": "true",
  "dependencies": {
    "@hotwired/stimulus": "^3.2.1",
    "@hotwired/turbo-rails": "^7.3.0",
    "@popperjs/core": "^2.11.8",
    "autoprefixer": "^10.4.14",
    "bootstrap": "^5.3.0",
    "bootstrap-icons": "^1.10.5",
    "esbuild": "^0.18.11",
    "nodemon": "^3.0.1",
    "postcss": "^8.4.25",
    "postcss-cli": "^10.1.0",
    "sass": "^1.63.6"
  },
  "scripts": {
    "build": "esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds --public-path=/assets",
    "build:css:compile": "sass ./app/assets/stylesheets/application.bootstrap.scss:./app/assets/builds/application.css --no-source-map --load-path=node_modules",
    "build:css:prefix": "postcss ./app/assets/builds/application.css --use=autoprefixer --output=./app/assets/builds/application.css",
    "build:css": "yarn build:css:compile && yarn build:css:prefix",
    "watch:css": "nodemon --watch ./app/assets/stylesheets/ --ext scss --exec \"yarn build:css\""
  },
  "browserslist": [
    "defaults"
  ]
}

Gemfile

source "https://rubygems.org"
git_source(:github) { |repo| "https://github.com/#{repo}.git" }

ruby "3.2.2"

# Bundle edge Rails instead: gem "rails", github: "rails/rails", branch: "main"
gem "rails", "~> 7.0.6"

# The original asset pipeline for Rails [https://github.com/rails/sprockets-rails]
gem "sprockets-rails"

# Use sqlite3 as the database for Active Record
gem "sqlite3", "~> 1.4"

# Use the Puma web server [https://github.com/puma/puma]
gem "puma", "~> 5.0"

# Bundle and transpile JavaScript [https://github.com/rails/jsbundling-rails]
gem "jsbundling-rails"

# Hotwire's SPA-like page accelerator [https://turbo.hotwired.dev]
gem "turbo-rails"

# Hotwire's modest JavaScript framework [https://stimulus.hotwired.dev]
gem "stimulus-rails"

# Bundle and process CSS [https://github.com/rails/cssbundling-rails]
gem "cssbundling-rails"

# Build JSON APIs with ease [https://github.com/rails/jbuilder]
gem "jbuilder"

# Use Redis adapter to run Action Cable in production
# gem "redis", "~> 4.0"

# Use Kredis to get higher-level data types in Redis [https://github.com/rails/kredis]
# gem "kredis"

# Use Active Model has_secure_password [https://guides.rubyonrails.org/active_model_basics.html#securepassword]
# gem "bcrypt", "~> 3.1.7"

# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem "tzinfo-data", platforms: %i[ mingw mswin x64_mingw jruby ]

# Reduces boot times through caching; required in config/boot.rb
gem "bootsnap", require: false

# Use Sass to process CSS
# gem "sassc-rails"

# Use Active Storage variants [https://guides.rubyonrails.org/active_storage_overview.html#transforming-images]
# gem "image_processing", "~> 1.2"

group :development, :test do
  # See https://guides.rubyonrails.org/debugging_rails_applications.html#debugging-with-the-debug-gem
  gem "debug", platforms: %i[ mri mingw x64_mingw ]
end

group :development do
  # Use console on exceptions pages [https://github.com/rails/web-console]
  gem "web-console"

  # Add speed badges [https://github.com/MiniProfiler/rack-mini-profiler]
  # gem "rack-mini-profiler"

  # Speed up commands on slow machines / big apps [https://github.com/rails/spring]
  # gem "spring"
end

group :test do
  # Use system testing [https://guides.rubyonrails.org/testing.html#system-testing]
  gem "capybara"
  gem "selenium-webdriver"
  gem "webdrivers"
end

gem "bootstrap"