Rails 6.0.3.2 yarn add bootstrap jquery popper.js is not working and cannot use bootstrap tooltip

Question

I am using rails 6 version 6.0.3.2

Here are all my steps for setup bootstrap 4:

step 1: rails new test_tooltip

step 2: rails g controller welcome index

step 3: in welcome/index.html.erb

<div class="container">
  <h3>Tooltip Example</h3>
  <a href="#" data-toggle="tooltip" title="Hooray!">Hover over me</a>
</div>
<div class="alert alert-success">
  <strong>Success!</strong> Indicates a successful or positive action.
</div>

<script>
$( document ).on('turbolinks:load', function() {
  $('[data-toggle="tooltip"]').tooltip();   
});
</script>

step 4: yarn add bootstrap jquery popper.js

info All dependencies
├─ [email protected]
├─ [email protected]
└─ [email protected]

step 5: config\webpack\environment.js

const { environment } = require('@rails/webpacker')

const webpack = require('webpack')
environment.plugins.append(
  'Provide',
  new webpack.ProvidePlugin({
    $: 'jquery/src/jquery', //  $: 'jquery', does not work!
    jQuery: 'jquery/src/jquery', // jQuery: 'jquery', does not work!
    Popper: ['popper.js', 'default']
  })
)
module.exports = environment

step 6: app\javascript\packs\application.js

import "bootstrap"

step 7: app\assets\stylesheets\application.scss

@import "bootstrap/scss/bootstrap";

When I visit the welcome/index page, although bootstrap css alert works but tooltip does not work and I get this error in console:

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

You can try install rails 6 version 6.0.3.2 and follow all my steps and you'll see exactly my result. Please help me fix this, I want to use tooltip of bootstrap.

Examinee

It seems like this is the correct solution: https://mcmap.net/q/911431/-tooltip-is-not-a-function-rails-6-webpack – Examinee

Answer 1

In my case, we were using popperjs/core so ended up with this webpack configurations:

const { environment } = require('@rails/webpacker');
const { VueLoaderPlugin } = require('vue-loader');
const vue = require('./loaders/vue');
const webpack = require('webpack');

environment.plugins.prepend('VueLoaderPlugin', new VueLoaderPlugin());
environment.loaders.prepend('vue', vue);
environment.plugins.append('Provide',
  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    cash: "cash-dom",
    Popper: ['@popperjs/core']
  })
);
module.exports = environment;

Healthful

Answer 2

Just add this to your application.js

require("jquery/src/jquery")

Woodworking