Ruby on Rails 7 with Bootstrap on Docker Compose 開発環境で Popovers と Tooltips を有効にする方法

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

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

https://qiita.com/normalsalt/items/8bf6c5010c9e9f127582

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

```diff_javascript: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 のバージョンによる違いもあるかと思うので、普通にドキュメントを見た方がいいかもしれませんね。

https://getbootstrap.com/docs/5.2/components/popovers/#enable-popovers

https://getbootstrap.com/docs/5.2/components/tooltips/#enable-tooltips

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

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

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

```diff_erb: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
```

次のように、ちゃんと動くようになっていれば、めでたく成功です。
![index.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109175/ebfcc0b5-1d3a-7ff7-7e1b-3e2189de52c1.png)
少しややこしいので、ちょっと悩んでしまったのですが、

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

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

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

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

https://railsguides.jp/asset_pipeline.html