アラートコンポーネント

Q: 私の Tooltip が表示されないのはなぜですか？

最も一般的な理由は、JavaScript が初期化されていないことです！ Tooltip は自動的に動作しません。 new bootstrap.Tooltip(element) または一括初期化コードを実行する必要があります。

Q: 複数の Toast が同時に表示された場合、スタックしますか？

はい。複数の Toast は、 toast-container 内で表示された順に垂直にスタックし、最新のものが上に表示されます。各 Toast は独自の独立したタイマーを持ち、他の Toast には影響しません。

Q: アラートボックス内の role="alert" は、スクリーンリーダーの現在の読み上げを中断しますか？

はい。 role="alert" はライブリージョンであり、ほとんどのスクリーンリーダーはその内容を直ちに読み上げ、他の読み上げを中断します。これはアラートの意図された効果です。干渉度を下げたい場合は、Toast の使用をお勧めします。

1. コースの紹介

(1) 前提条件

レッスン14: Carousel と Modal

(2) 🎯 学習内容

alert を使用して、異なるレベルの通知メッセージを表示する
alert-dismissible を使用して閉じられるアラートを実装する
Toast を使用して、一時的なポップアップ通知を実装する
Tooltip と Popover を使用して、ホバー/クリックのツールチップを実装する
Alert、Toast、Tooltip の適切な使用場面を区別する

(3) 痛点

Charlieはチケット送信機能を開発しています。送信成功の緑のアラートボックス、失敗の赤のボックス、数秒後に自動的に消えるToast、アクションボタンにホバーしたときに説明が表示されるTooltipが必要です。

(4) 解決策

ユーザーは、アクション後に即座のフィードバックが必要です。送信成功、保存失敗、削除確認、またはアクションの促しです。Bootstrapは、アラート、トースト、ツールチップという3つの異なるレベルのフィードバックコンポーネントを提供します。

(5) 利点

Bootstrapのフィードバックコンポーネントを使用することで、異なるシナリオに最適なユーザーフィードバック体験を提供できます。

2. Alerts

▶ サンプル Alert の基本

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Alert Demo</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container py-4">
    <div class="alert alert-primary" role="alert">Primary alert - a simple info message.</div>
    <div class="alert alert-success" role="alert">Success - your changes have been saved.</div>
    <div class="alert alert-danger" role="alert">Danger - something went wrong.</div>
    <div class="alert alert-warning" role="alert">Warning - please check your input.</div>
    <div class="alert alert-info" role="alert">Info - new updates are available.</div>

    <div class="alert alert-warning alert-dismissible fade show" role="alert">
      <strong>Notice!</strong> This alert can be dismissed.
      <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>

    <div class="alert alert-success" role="alert">
      <h4 class="alert-heading">Well done!</h4>
      <p>Your account has been created successfully.</p>
      <hr>
      <p class="mb-0">Check your email for verification link.</p>
    </div>
  </div>
</body>
</html>

▶ 試してみよう

(1) Alert のカラー

クラス	セマンティクス	用途
`alert-primary`	青	一般的な情報
`alert-success`	緑	操作の成功
`alert-danger`	赤	エラー/失敗
`alert-warning`	黄	警告/注意
`alert-info`	シアン	情報メッセージ

(2) 閉じられるアラート

HTML

<div class="alert alert-danger alert-dismissible fade show" role="alert">
  <strong>Error!</strong> Please fix the highlighted fields.
  <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>

▶ 試してみよう

3. Toast

HTML

<button class="btn btn-primary" onclick="showToast()">Show Toast</button>

<div class="toast-container position-fixed bottom-0 end-0 p-3">
  <div id="liveToast" class="toast" role="alert">
    <div class="toast-header">
      <strong class="me-auto">Notification</strong>
      <small>just now</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
    </div>
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
  </div>
</div>

<script>
  function showToast() {
    var toast = new bootstrap.Toast(document.getElementById('liveToast'))
    toast.show()
  }
</script>

▶ 試してみよう

(1) Toast の構造

要素	クラス	説明
コンテナ	`toast-container`	画面の隅に配置
Toast	`toast`	個々のトーストカード
ヘッダー	`toast-header`	アイコン + タイトル + 時間
ボディ	`toast-body`	メッセージ内容

(2) Toast の設定

HTML

<div class="toast" data-bs-delay="3000">Auto-hide after 3 seconds</div>
<div class="toast" data-bs-autohide="false">No auto-hide (user must close)</div>

▶ 試してみよう

4. Tooltips

HTML

<button class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top"
        title="Tooltip on top">Top tooltip</button>
<button class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right"
        title="Tooltip on right">Right tooltip</button>
<button class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom"
        title="Tooltip on bottom">Bottom tooltip</button>
<button class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left"
        title="Tooltip on left">Left tooltip</button>

<script>
  var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
  var tooltipList = tooltipTriggerList.map(function(el) {
    return new bootstrap.Tooltip(el)
  })
</script>

▶ 試してみよう

5. Popovers

HTML

<button class="btn btn-lg btn-danger" data-bs-toggle="popover"
        title="Popover Title"
        data-bs-content="This is the popover body content.">
  Click to toggle popover
</button>

<script>
  var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
  var popoverList = popoverTriggerList.map(function(el) {
    return new bootstrap.Popover(el)
  })
</script>

▶ 試してみよう

6. その他の Alert コンポーネントの例

▶ サンプル閉じられるアラートの完全デモ

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dismissible Alerts</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container py-4">
    <div class="alert alert-success alert-dismissible fade show" role="alert">
      <strong>Success!</strong> Your changes have been saved.
      <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
    <div class="alert alert-danger alert-dismissible fade show" role="alert">
      <strong>Error!</strong> Please check your input and try again.
      <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
    <div class="alert alert-warning alert-dismissible fade show" role="alert">
      <strong>Warning!</strong> Your session will expire in 5 minutes.
      <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
    <div class="alert alert-info alert-dismissible fade show" role="alert">
      <strong>Heads up!</strong> New software update is available.
      <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

▶ 試してみよう

▶ サンプル Toast 通知センター

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Toast Notifications</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container py-4">
    <button class="btn btn-success" onclick="showSuccessToast()">Success Notification</button>
    <button class="btn btn-danger" onclick="showErrorToast()">Error Notification</button>

    <div class="toast-container position-fixed top-0 end-0 p-3" style="z-index: 1080;">
      <div id="successToast" class="toast" role="alert">
        <div class="toast-header text-white bg-success">
          <strong class="me-auto">✅ Success</strong>
          <small>just now</small>
          <button type="button" class="btn-close btn-close-white" data-bs-dismiss="toast"></button>
        </div>
        <div class="toast-body">
          Your data has been saved successfully!
        </div>
      </div>
      <div id="errorToast" class="toast" role="alert">
        <div class="toast-header text-white bg-danger">
          <strong class="me-auto">❌ Error</strong>
          <small>just now</small>
          <button type="button" class="btn-close btn-close-white" data-bs-dismiss="toast"></button>
        </div>
        <div class="toast-body">
          Something went wrong. Please try again.
        </div>
      </div>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
  <script>
    function showSuccessToast() {
      new bootstrap.Toast(document.getElementById('successToast')).show();
    }
    function showErrorToast() {
      new bootstrap.Toast(document.getElementById('errorToast')).show();
    }
  </script>
</body>
</html>

▶ 試してみよう

▶ サンプル Tooltips (全方向)

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tooltip Directions</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container py-5 text-center">
    <div class="mb-4">
      <button class="btn btn-secondary me-2" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">
        Top
      </button>
      <button class="btn btn-secondary me-2" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip on right">
        Right
      </button>
      <button class="btn btn-secondary me-2" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom">
        Bottom
      </button>
      <button class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip on left">
        Left
      </button>
    </div>
    <div>
      <button class="btn btn-outline-info" data-bs-toggle="tooltip" data-bs-html="true"
              title="<em>Rich</em> <b>Tooltip</b>">
        HTML Tooltip
      </button>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
  <script>
    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
    var tooltipList = tooltipTriggerList.map(function(el) {
      return new bootstrap.Tooltip(el)
    })
  </script>
</body>
</html>

▶ 試してみよう

HTML

<button class="btn btn-lg btn-primary me-2" data-bs-toggle="popover"
        title="Profile Info"
        data-bs-content="<strong>Alice Chen</strong><br>Senior Designer<br><span class='badge bg-success'>Online</span>"
        data-bs-html="true">
  HTML Popover
</button>

<button class="btn btn-lg btn-outline-danger me-2" data-bs-toggle="popover"
        title="Delete Confirmation"
        data-bs-content="Are you sure? This action cannot be undone."
        data-bs-trigger="focus">
  Focus Popover
</button>

<button class="btn btn-lg btn-secondary" data-bs-toggle="popover"
        title="Notification"
        data-bs-content="You have 3 unread messages."
        data-bs-placement="bottom">
  Bottom Popover
</button>

<script>
  var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
  var popoverList = popoverTriggerList.map(function(el) {
    return new bootstrap.Popover(el)
  })
</script>

▶ 試してみよう

(1) 通知コンポーネントの選択フロー

flowchart TD
    A[ユーザーに通知が必要] --> B{メッセージの重要性}
    B -->|高い/即時注意| C[Alert]
    B -->|中程度/確認が必要| D[Popover]
    B -->|低い/一時的| E[Toast]
    C --> F{ユーザーの操作が必要？}
    F -->|はい| G[閉じられるアラート alert-dismissible]
    F -->|いいえ| H[静的アラート]
    E --> I{自動非表示？}
    I -->|はい| J[デフォルト5秒]
    I -->|いいえ| K[data-bs-autohide=false]
    D --> L{トリガーメソッド}
    L -->|ホバー| M[Tooltip]
    L -->|クリック| N[Popover]

Alert カラー	クラス	セマンティクス	使用場面
青	`alert-primary`	情報	システム告知、ヒント
緑	`alert-success`	成功	操作完了、保存成功
赤	`alert-danger`	エラー	操作失敗、例外
黄	`alert-warning`	警告	まもなく期限切れ、注意
シアン	`alert-info`	ヒント	新機能、更新通知

Toast 設定	属性	効果
自動非表示	`data-bs-autohide="true"`	デフォルト、数秒後に消える
手動閉じ	`data-bs-autohide="false"`	ユーザーがクリックして閉じる必要あり
遅延時間	`data-bs-delay="3000"`	3秒後に消える（ミリ秒）
アニメーション有効	`class="toast fade"`	フェードイン/アウトアニメーション
位置コンテナ	`toast-container` + 位置指定	画面の隅に固定

比較項目	Tooltip	Popover
トリガーメソッド	ホバー	クリック
コンテンツ量	少量のテキスト	タイトル + ボディ + HTML
方向	top/right/bottom/left	同左
HTML サポート	`data-bs-html="true"` が必要	`data-bs-html="true"` が必要
閉じる方法	もう一度クリックまたはEscキー	もう一度クリックまたはEscキー
典型的な使用場景	アイコン説明、略語解説	フォームヒント、詳細プレビュー

❓ よくある質問

Q 私の Tooltip が表示されないのはなぜですか？

A 最も一般的な理由は、JavaScript が初期化されていないことです！ Tooltip は自動的に動作しません。new bootstrap.Tooltip(element) または一括初期化コードを実行する必要があります。

Q Alert 内の role="alert" は何のためにあるのですか？

A これはスクリーンリーダーに対してこれが重要なメッセージであることを伝えるアクセシビリティ属性です。常に入れることが推奨されます。

Q Toast と Alert はそれぞれどのような場面に適していますか？

A Toast は、受動的で干渉度の低い通知に適しています。ユーザーの操作をブロックせず、数秒後に自動的に消えます。Alert は、ユーザーの注意が必要な情報に適しています。ユーザーが閉じるまでページ上に残ります。

Q 複数の Toast が同時に表示された場合、スタックしますか？

A はい。複数の Toast は、toast-container 内で表示された順に垂直にスタックし、最新のものが上に表示されます。各 Toast は独自の独立したタイマーを持ち、他の Toast には影響しません。

Q アラートボックス内の role="alert" は、スクリーンリーダーの現在の読み上げを中断しますか？

A はい。role="alert" はライブリージョンであり、ほとんどのスクリーンリーダーはその内容を直ちに読み上げ、他の読み上げを中断します。これはアラートの意図された効果です。干渉度を下げたい場合は、Toast の使用をお勧めします。

📖 まとめ

Alerts: alert alert-{color}、alert-dismissible + btn-close で閉じる機能
Toast: toast + toast-header + toast-body、JSで .show() を呼び出して有効化
Tooltip: data-bs-toggle="tooltip" + title、JSで初期化が必要
Popover: Tooltip に似ているが、タイトルとより多くのコンテンツをサポート

📝 練習問題

⭐ フォーム送信のフィードバックフローを作成します。送信成功時に緑の閉じられるアラートを表示し、送信失敗時に赤のアラートを表示します。
⭐⭐ Toast を使用した「新着メッセージ通知」を実装します。ボタンをクリックすると「Alice から新しいメッセージ」が表示され、3秒後に自動的に消える Toast をトリガーします。
⭐⭐⭐ ページ上に5つのソーシャルメディアリンクのアイコンボタンを配置します。各ボタンの Tooltip に対応するプラットフォーム名を表示し、方向はすべて下（bottom）に統一します。

前回のレッスン: Carousel と Modal · 次のレッスン: Accordion

Web-Tutorial 技術チーム

複数の開発者によって共同維持されているプログラミングチュートリアルプラットフォーム。各チュートリアルは専門分野の開発者が執筆・レビューしています。正確で信頼性の高いコンテンツを目指しています — 問題を見つけた場合はお知らせください。

私たちについて

アラートコンポーネント

1. コースの紹介

(1) 前提条件

(2) 🎯 学習内容

(3) 痛点

(4) 解決策

(5) 利点

2. Alerts

▶ サンプル Alert の基本

(1) Alert のカラー

(2) 閉じられるアラート

3. Toast

(1) Toast の構造

(2) Toast の設定

4. Tooltips

5. Popovers

6. その他の Alert コンポーネントの例

▶ サンプル 閉じられるアラートの完全デモ

▶ サンプル Toast 通知センター

▶ サンプル Tooltips (全方向)

▶ サンプル HTML コンテンツを含む Popover

(1) 通知コンポーネントの選択フロー

❓ よくある質問

📖 まとめ

📝 練習問題

▶ サンプル閉じられるアラートの完全デモ