タイトル通りの、ごく単純な内容なのですが、もしかしたら、同じように少し悩んでしまう人もいるのではないかと思ったので、共有しておきます。
ちなみに、そもそも「 Ruby on Rails 7 with Bootstrap on Docker Compose 開発環境 」を構築する方法については、以前の記事をご覧いただければ幸いです。
さて、やること自体はめちゃくちゃ簡単で、まず、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 のサンプルも配置しておきましょう。
<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 以下のファイルなので、古いハッシュ値の方を参照したままだと変更が反映されない、といった感じでしょうか。
おそらく、設定をいじったりすれば、色々と挙動を変えられたりもすると思うのですが、今回は、あえてデフォルトのままで対応してみました。
この辺の知識も、しっかりと学んでいきたいところですね。