Install Bootstrap 5 with tooltip, popover and toasts in Ruby on Rails 6+ (without jQuery)

Install Bootstrap 5 without jQuery

1) yarn add bootstrap

2) yarn add @popperjs/core

3.1) in folder 'app/javascript/' create new folder 'stylesheets':
mkdir app/javascript/stylesheets/

3.2) in new folder 'stylesheets' create file 'application.scss'
cd app/javascript/stylesheets/
touch application.scss

3.3) add to file 'app/javascript/stylesheets/application.scss' this content:
@import "bootstrap"

4) add line to file: app/views/layouts/application.html.erb
<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>

PS like this:
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>

5) add line to file 'app/javascript/packs/application.js'
require("utilities/popover")

PS Like this
import Rails from "@rails/ujs"
import Turbolinks from "turbolinks"
import * as ActiveStorage from "@rails/activestorage"
import "channels"

require("utilities/popover")

Rails.start()
Turbolinks.start()
ActiveStorage.start()

6.1) in folder 'app/javascript/' create new folder 'utilities'
mkdir app/javascript/utilities

6.2) in new folder 'utilities' create new file 'popover.js':  
cd app/javascript/utilities
touch popover.js

6.3) add content to 'popover.js':
import * as bootstrap from 'bootstrap'
import "../stylesheets/application"

document.addEventListener("turbolinks:load", function(event) {
  var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
  var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
    return new bootstrap.Popover(popoverTriggerEl)
  })

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


https://whatapalaver.co.uk/bootstrap-5-rails-6
https://stackoverflow.com/questions/64777987/bootstrap-5-tooltip-popover-and-toasts-not-working-in-ruby-on-rails-6
https://blog.corsego.com/rails-bootstrap-5-yarn

👀

console

yarn add bootstrap
yarn add @popperjs/core
mkdir app/javascript/stylesheets/
cd app/javascript/stylesheets/
touch application.scss

app/javascript/stylesheets/application.scss

@import "bootstrap"

app/views/layouts/application.html.erb

<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
++ <%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>

console

mkdir app/javascript/utilities
cd app/javascript/utilities
touch popover.js

app/javascript/utilities/popover.js

import * as bootstrap from 'bootstrap'
import "../stylesheets/application"

document.addEventListener("turbolinks:load", function(event) {
  var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
  var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
    return new bootstrap.Popover(popoverTriggerEl)
  })

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

app/javascript/packs/application.js

import Rails from "@rails/ujs"
import Turbolinks from "turbolinks"
import * as ActiveStorage from "@rails/activestorage"
import "channels"

++ require("utilities/popover")

Rails.start()
Turbolinks.start()
ActiveStorage.start()

That's it!

With stimulus - added here: https://blog.corsego.com/rails-bootstrap-5-yarn