Bootstrap4 ツールチップ
この記事では、Bootstrap4 のツールチップコンポーネントの使用方法について説明します。ツールチップの作成、設定、表示方法について詳しく解説します。
Bootstrap ツールチップ - 概要
ツールチップは、要素にマウスポインターを合わせたときに表示される小さなポップアップウィンドウです。要素に関する追加情報を提供したり、ユーザーをガイドしたりするために使用されます。
Bootstrap のツールチップは、Popper.js ライブラリに依存しています。Popper.js は、ツールチップの配置と表示を管理する役割を担っています。
シンプルなツールチップの例
<button type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
Tooltip on top
</button>
Bootstrap ツールチップ - 使用方法
ツールチップを作成するには、以下の手順に従います。
- ツールチップを表示する要素に
data-toggle="tooltip"属性を追加します。 title属性にツールチップに表示するテキストを設定します。- 必要に応じて、他のデータ属性を使用してツールチップの外観や動作をカスタマイズします。
データ属性を使用したツールチップの作成
ツールチップは、データ属性を使用して簡単に作成できます。以下の表は、よく使用されるデータ属性とその機能の一覧です。
| 属性 | 説明 | デフォルト値 |
|---|---|---|
data-toggle |
ツールチップを有効にするために必須です。値は "tooltip" に設定します。 |
- |
title |
ツールチップに表示するテキストを指定します。 | - |
data-placement |
ツールチップの配置を指定します。有効な値は "top"、"bottom"、"left"、"right" です。 |
"top" |
JavaScript を使用したツールチップの作成
ツールチップは、JavaScript を使用して作成することもできます。
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
ツールチップオプション
ツールチップの外観や動作は、オプションを使用してカスタマイズできます。オプションは、データ属性または JavaScript で設定できます。
| オプション | デフォルト値 | 説明 |
|---|---|---|
animation |
true |
ツールチップを表示/非表示するときにアニメーションを使用するかどうかを指定します。 |
template |
'<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>' |
ツールチップの HTML テンプレートを指定します。 |
trigger |
'hover focus' |
ツールチップを表示するトリガーイベントを指定します。有効な値は 'hover'、'focus'、'click'、'manual' です。 |
title |
'' |
ツールチップに表示するテキストを指定します。 |
delay |
0 |
ツールチップを表示/非表示するまでの遅延時間をミリ秒単位で指定します。 |
html |
false |
title 属性の値を HTML として解釈するかどうかを指定します。 |
selector |
false |
ツールチップをデリゲートするセレクタを指定します。 |
placement |
'top' |
ツールチップの配置を指定します。有効な値は 'top'、'bottom'、'left'、'right' です。 |
offset |
0 |
ツールチップの位置をオフセットします。 |
container |
false |
ツールチップを追加するコンテナ要素を指定します。 |
fallbackPlacement |
'flip' |
指定された配置でツールチップを表示できない場合のフォールバック配置を指定します。有効な値は 'flip'、'clockwise'、'counterclockwise' です。 |
boundary |
'scrollParent' |
ツールチップの配置を制限する境界要素を指定します。 |
ツールチップメソッド
ツールチップは、JavaScript メソッドを使用して操作できます。
| メソッド | 説明 |
|---|---|
.tooltip(options) |
ツールチップを初期化します。 |
.tooltip('show') |
ツールチップを表示します。 |
.tooltip('hide') |
ツールチップを非表示にします。 |
.tooltip('toggle') |
ツールチップの表示/非表示を切り替えます。 |
.tooltip('dispose') |
ツールチップを破棄します。 |
.tooltip('enable') |
ツールチップを有効にします。 |
.tooltip('disable') |
ツールチップを無効にします。 |
.tooltip('toggleEnabled') |
ツールチップの有効/無効を切り替えます。 |
.tooltip('update') |
ツールチップの内容と配置を更新します。 |
ツールチップイベント
ツールチップは、ライフサイクル中に以下のイベントをトリガーします。
| イベント | 説明 |
|---|---|
show.bs.tooltip |
ツールチップが表示されようとしているときにトリガーされます。 |
shown.bs.tooltip |
ツールチップが表示されたときにトリガーされます。 |
hide.bs.tooltip |
ツールチップが非表示になろうとしているときにトリガーされます。 |
hidden.bs.tooltip |
ツールチップが非表示になったときにトリガーされます。 |
inserted.bs.tooltip |
ツールチップの内容が DOM に挿入されたときにトリガーされます。 |
関連情報
よくある質問
Q1: ツールチップが表示されません。何が問題でしょうか？
A1: 考えられる原因はいくつかあります。
- Popper.js が正しく読み込まれているか確認してください。
- ツールチップを表示する要素に
data-toggle="tooltip"属性が設定されているか確認してください。 - JavaScript でツールチップを初期化している場合は、コードが正しく記述されているか確認してください。
Q2: ツールチップの配置を変更するにはどうすればよいですか？
A2: data-placement 属性または placement オプションを使用して配置を変更できます。
Q3: ツールチップの内容を HTML で記述するにはどうすればよいですか？
A3: html オプションを true に設定します。これにより、title 属性の値が HTML として解釈されるようになります。