先生と生徒の会話形式で理解しよう

生徒

「Bootstrapでモーダルとかツールチップって簡単に使えるんですか？」

先生

「はい、Bootstrapでは簡単にモーダルやトースト、ツールチップが使えます。でも、JavaScriptの初期化が必要な場合もあるんですよ。」

生徒

「初期化ってなんですか？」

先生

「初期化とは、JavaScriptでそれらの機能を使えるように“スイッチを入れる”作業です。今日は初心者向けに、モーダル・トースト・ツールチップがすぐに使えるスターターテンプレートを紹介します！」

1. モーダル・トースト・ツールチップとは何か

モーダル（Modal）は、画面の上にポップアップのようなウィンドウを表示する機能です。ユーザーに重要なお知らせや入力フォームを表示するのに使います。

トースト（Toast）は、画面の隅にふわっと表示されて、数秒後に自動で消えるお知らせメッセージです。保存完了やエラー通知に使われます。

ツールチップ（Tooltip）は、ボタンやリンクなどにマウスを乗せたときに小さな吹き出しが表示される機能です。補足説明に便利です。

2. Bootstrapで使うために必要な初期化とは？

Bootstrapでは、HTMLにクラスを追加するだけで動く機能もありますが、モーダルやトースト、ツールチップなど一部の機能はJavaScriptで「初期化」する必要があります。

この初期化は、ページを読み込んだときに自動で設定するようにすると便利です。

3. モーダル・トースト・ツールチップが使えるスターターテンプレート

ここでは、モーダル・トースト・ツールチップをすぐに使えるHTMLスターターパックを紹介します。初心者でもコピーして使える内容になっています。


<!-- ボタン：モーダルを開く -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#sampleModal">
  モーダルを開く
</button>

<!-- モーダル本体 -->
<div class="modal fade" id="sampleModal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">モーダルのタイトル</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        モーダルの中身です。
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">閉じる</button>
      </div>
    </div>
  </div>
</div>

<!-- トーストボタン -->
<button class="btn btn-success" id="showToast">トーストを表示</button>

<!-- トースト本体 -->
<div class="toast-container position-fixed bottom-0 end-0 p-3">
  <div class="toast" id="myToast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <strong class="me-auto">通知</strong>
      <small>たった今</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
    </div>
    <div class="toast-body">
      トーストが表示されました。
    </div>
  </div>
</div>

<!-- ツールチップ付きボタン -->
<button type="button" class="btn btn-warning" data-bs-toggle="tooltip" title="これはツールチップです！">
  ツールチップ付きボタン
</button>

<!-- 初期化スクリプト -->
<script>
  // ツールチップの初期化
  document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(function (el) {
    new bootstrap.Tooltip(el)
  })

  // トーストの初期化
  const toastTrigger = document.getElementById('showToast')
  const toastLive = document.getElementById('myToast')
  if (toastTrigger) {
    toastTrigger.addEventListener('click', () => {
      const toast = new bootstrap.Toast(toastLive)
      toast.show()
    })
  }
</script>

ブラウザ表示