【Rails】StimulusでBootstrapのTooltipを動かす

今回は、Stimulusを使用してBootstrapのTooltipを動かす方法について紹介します。

ツールチップとは？

ツールチップは、ユーザーが要素（ボタンや画像など）にホバーしたりクリックしたりした際に表示される、小さな説明文の吹き出しです。これは、要素単体では意味が不明確な場合に特に有用です。

インストール方法

まず、bootstrapとpopperjsがnode_modulesに含まれているかを確認してください。もし存在しなければ、yarn add bootstrapまたはnpm install bootstrapを実行してインストールしましょう。

Controllerの作成

Tooltipを機能させるために、まずStimulusコントローラを作成します。

./bin/rails generate stimulus tooltip

Controllerの設定

作成したコントローラーファイルにBootstrapのTooltipクラスをインポートします。接続時にTooltipのインスタンスが生成され、data-tooltip属性からタイトルが取得されるように設定します。これでコントローラーの準備は完了です。

app/javascript/controllers/tooltip_controller.js

import { Controller } from "@hotwired/stimulus"
import { Tooltip } from "bootstrap"

export default class extends Controller {
  connect() {
    new Tooltip(this.element, {
      title: this.element.getAttribute("data-tooltip")
    });
  }
}

ERBファイルへの記述

ツールチップを表示させたいHTML要素に、data-controllerとdata-tooltip属性を追加します。例として、アイコンにツールチップを追加する場合は以下のようになります。

<i class="fa fa-plus" data-controller="tooltip" data-tooltip="画像を追加"></i>

これでツールチップが動作するようになります。

オプションの利用

Tooltipでは、タイトル以外にも様々なオプションを設定できます。

たとえば、placementオプションを使用すれば吹き出しの表示位置を左右や下に変更できます。また、表示の遅延設定や、ホバーやクリックでの発火設定も可能です。詳細は以下のドキュメントのオプションセクションを参照してください。