ツールチップ (Tooltip)

要素にホバー・フォーカス時に表示される情報ポップアップコンポーネントです。位置制御、遅延表示、アニメーション効果などをカスタマイズできます。

基本

基本的な使用

これは基本的なツールチップです
フォーカスでも表示されます

基本のCode:

<div class=“tooltip tooltip-top”>
  <button class=“btn btn-primary btn-md”>ホバーしてください</button>
  <span class=“tooltip-content”>これは基本的なツールチップです</span>
</div>

位置

4方向の位置制御

上に表示
下に表示
左に表示
右に表示

位置のCode:

<div class=“tooltip tooltip-top”>…</div>
<div class=“tooltip tooltip-bottom”>…</div>
<div class=“tooltip tooltip-left”>…</div>
<div class=“tooltip tooltip-right”>…</div>

サイズ

サイズバリエーション

小さいツールチップ
標準ツールチップ
大きいツールチップ

サイズのCode:

<div class=“tooltip tooltip-top tooltip-sm”>…</div>
<div class=“tooltip tooltip-top tooltip-md”>…</div>
<div class=“tooltip tooltip-top tooltip-lg”>…</div>

色・テーマ

色バリエーション

デフォルト（ダーク）
プライマリーテーマ
セカンダリーテーマ
成功メッセージ
警告メッセージ
エラーメッセージ
ライトテーマ

色・テーマのCode:

<div class=“tooltip tooltip-top tooltip-primary”>…</div>
<div class=“tooltip tooltip-top tooltip-success”>…</div>
<div class=“tooltip tooltip-top tooltip-warning”>…</div>
<div class=“tooltip tooltip-top tooltip-danger”>…</div>
<div class=“tooltip tooltip-top tooltip-light”>…</div>

アニメーション

アニメーション効果

フェードイン・アウト
拡大・縮小アニメーション
スライドイン・アウト
0.5秒遅延で表示

アニメーションのCode:

<div class=“tooltip tooltip-top tooltip-fade”>…</div>
<div class=“tooltip tooltip-top tooltip-scale”>…</div>
<div class=“tooltip tooltip-top tooltip-slide”>…</div>
<div class=“tooltip tooltip-top tooltip-delay”>…</div>

複数行コンテンツ

マルチラインツールチップ

これは複数行のツールチップです。 長いテキストも自動的に 適切な幅で折り返されます。

ヘルプ情報
この機能の使い方：

  1. ボタンをクリック
  2. 必要な情報を入力
  3. 保存ボタンを押す

複数行のCode:

<div class=“tooltip tooltip-top tooltip-multiline”>
  <button class=“btn btn-primary btn-md”>詳細説明</button>
  <span class=“tooltip-content”>
    これは複数行のツールチップです。
    長いテキストも自動的に
    適切な幅で折り返されます。
  </span>
</div>

JavaScript制御

プログラムによる制御

JavaScriptで制御されています

動的コンテンツ

JavaScript制御のCode:

<div id=“js-tooltip” class=“tooltip tooltip-top”>
  <button class=“btn btn-primary btn-md”>JavaScript制御</button>
  <span class=“tooltip-content”>JavaScriptで制御されています</span>
</div>

// JavaScript
function showTooltip() {
  document.getElementById(‘js-tooltip’).classList.add(‘tooltip-show’);
}

function hideTooltip() {
  document.getElementById(‘js-tooltip’).classList.remove(‘tooltip-show’);
}

実用的なパターン

フォームヘルプ

パスワードの要件：
• 8文字以上
• 大文字・小文字を含む
• 数字を含む
• 特殊文字を含む

アイコンボタンツールチップ

お気に入りに追加
共有
その他のオプション

ステータス表示

システム正常稼働中
API サーバー
一部機能に制限があります
データベース
サービス停止中
メール送信

フォームヘルプのCode:

<div class=“flex items-center gap-2”>
  <label class=“label” for=“password-field”>パスワード</label>
  <div class=“tooltip tooltip-right tooltip-multiline”>
    <svg class=“w-4 h-4 text-gray-400 cursor-help”>…</svg>
    <span class=“tooltip-content”>
      パスワードの要件：<br />
      • 8文字以上<br />
      • 大文字・小文字を含む
    </span>
  </div>
</div>

アイコンボタンのCode:

<div class=“tooltip tooltip-bottom”>
  <button class=“btn btn-secondary btn-sm p-2”>
    <svg class=“w-4 h-4”>…</svg>
  </button>
  <span class=“tooltip-content”>お気に入りに追加</span>
</div>

アクセシビリティ

  • • ツールチップは補助的な情報のみに使用し、重要な情報は本文に記載
  • • トリガー要素にはaria-describedbyでツールチップとの関連を明示
  • • ツールチップコンテンツにはrole="tooltip"を設定
  • • Escapeキーでツールチップを閉じることができる
  • • キーボードフォーカスでもツールチップが表示される
  • • モバイルデバイスではタップで表示・非表示を切り替え
  • • 自動非表示のタイマーを設けない（ユーザーのペースで読める）
  • • 十分なコントラスト比を確保（背景色とテキスト色）
  • • ツールチップが表示領域外に出ないよう位置を自動調整

このツールチップはアクセシビリティに配慮しています