タイトル通りの、ごく単純な内容なのですが、もしかしたら、同じように少し悩んでしまう人もいるのではないかと思ったので、共有しておきます。

ちなみに、そもそも「 Ruby on Rails 7 with Bootstrap on Docker Compose 開発環境」を構築する方法については、以前の記事をご覧いただければ幸いです。

さて、やること自体はめちゃくちゃ簡単で、まず、app/javascript/application.js を開いて、例えば、以下のように追記してください。

app/javascript/application.js

  // Entry point for the build script in your package.json
  import "@hotwired/turbo-rails"
  import "./controllers"
  import * as bootstrap from "bootstrap"
+
+ document.addEventListener('turbo:load', () => {
+   const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
+   const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))
+   const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
+   const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
+ })

一応、Bootstrap のバージョンによる違いもあるかと思うので、普通にドキュメントを見た方がいいかもしれませんね。

ただし、addEventListener() で turbo:load というイベントに対して設定しておかないと、ページ遷移する度にリロードしないと反映されなくなってしまうみたいです。

ちなみに、前のバージョンまでは turbolinks:load がこれに該当していたらしいので、場合によっては、その辺も注意が必要かもしれません。

動作確認のため、適当なビューに Popovers や Tooltips のサンプルも配置しておきましょう。

app/views/articles/index.html.erb

  <h1>Articles#index</h1>
  <p>Find me in app/views/articles/index.html.erb</p>
+ 
+ <p class="muted">Placeholder text to demonstrate some <a href="#" data-bs-toggle="tooltip" data-bs-title="Default tooltip">inline links</a> with tooltips. This is now just filler, no killer. Content placed here just to mimic the presence of <a href="#" data-bs-toggle="tooltip" data-bs-title="Another tooltip">real text</a>. And all that just to give you an idea of how tooltips would look when used in real-world situations. So hopefully you've now seen how <a href="#" data-bs-toggle="tooltip" data-bs-title="Another one here too">these tooltips on links</a> can work in practice, once you use them on <a href="#" data-bs-toggle="tooltip" data-bs-title="The last tip!">your own</a> site or project.</p>
+ <button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" data-bs-title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

ファイルの編集が終わったら、次のコマンドを実行して、アセットをコンパイルします。

docker compose run --rm web rails assets:precompile

これで、必要な JavaScript ファイル自体は、ビルドされているはずなのですが、

どうやら、Web サーバーが参照するファイルの方は、まだ切り替わっていないようなので、反映されない場合は、コンテナを再起動してみてください。

docker compose restart

次のように、ちゃんと動くようになっていれば、めでたく成功です。

少しややこしいので、ちょっと悩んでしまったのですが、

ビルドされたファイルは app/assets/builds に、Web サーバーが参照する静的ファイルは public/assets 以下に生成され、

実際に読み込まれるのは、ファイル名にフィンガープリントを含む public/assets 以下のファイルなので、古いハッシュ値の方を参照したままだと変更が反映されない、といった感じでしょうか。

おそらく、設定をいじったりすれば、色々と挙動を変えられたりもすると思うのですが、今回は、あえてデフォルトのままで対応してみました。

この辺の知識も、しっかりと学んでいきたいところですね。