ツールチップ（Tooltips） v4.0.0設定変更

概要（Overview）

ツールチップ・プラグインを使用するときに知っておくべきこと：

• ツールチップは、サードパーティのライブラリであるPopperを利用して位置情報を取得しているため、ツールチップが動作するためには bootstrap.js か bootstrap.min.js の前にpopper.min.jsを組み込むか、代わりにPopperを内部に含む bootstrap.bundle.js か bootstrap.bundle.min.js を使用する必要がある。
• ソースファイルからJavaScriptを構築する場合は、util.js が必要。
• ツールチップは、パフォーマンス上の理由で任意で取得されるため、自分で初期化する必要がある（そのため実行コードが必要）。
• title の長さがゼロのツールチップは表示されない。
• container: 'body' を指定すると、より複雑なコンポーネント（インプットグループやボタングループなど）のレンダリングの問題が回避可能。
• 非表示要素のツールチップは機能しない。
• .disabled または disabled 要素のツールチップは、それを囲む要素で起動する必要がある。サンプル
• 複数行にまたがるハイパーリンクから起動されると、ツールチップは中央に配置されるので、この動作を回避するには、<a> に .text-nowrap を使用すること。
• ツールチップは、対応する要素がDOMから削除される前に非表示にする必要がある。
• ツールチップは、シャドウDOM内の要素のために起動可能。

いくつかの実例を使ってどのように動作するか次に表示。

どこでもツールチップを有効にする例（Example: Enable tooltips everywhere）

ページ上のすべてのツールチップを初期化する1つの方法は、data-toggle 属性でそれらを選択すること。

実行コード

JavaScriptの場合コピー$(function () {
	$('[data-toggle="tooltip"]').tooltip()
})

HTMLの場合コピー<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
	$('[data-toggle="tooltip"]').tooltip()
</script>

ツールチップの設定（Examples）v4.0.0一部変更

ツールチップを表示するには、以下のリンクにカーソルを合わせること：

見本

設定例

HTMLコピー
ツールチップを使用したdata-toggle="tooltip" title="デフォルトのツールチップ">横並びリンクを示すプレースホルダーテキスト。これは今では単なるつなぎであり、大層なものではない。 data-toggle="tooltip" title="もう一つのツールチップ">実際のテキストの存在を模倣するためだけにここに配置されたコンテンツである。そして、これらすべては、実際の状況で使用したときにツールチップがどのように見えるかを示すためのもの。従って、data-toggle="tooltip" title="ここにももう1つ">リンク上のこれらのツールチップを自分のサイトやプロジェクトで使用すると、実際にdata-toggle="tooltip" title="最後のツールチップ!">どのように機能するか理解できると思う。

下のボタンにカーソルを合わせると、上、右、下、左の4つのツールチップの指示が表示。

1. ツールチップの方向設定

見本

設定例

上に出るツールチップコピー<button type="button" class="btn btn-secondary mb-2 mb-md-0" data-toggle="tooltip" data-placement="top" title="上に出るツールチップ">ツールチップ(上)</button>

右に出るツールチップコピー<button type="button" class="btn btn-secondary mb-2 mb-md-0" data-toggle="tooltip" data-placement="right" title="右に出るツールチップ">ツールチップ(右)</button>

下に出るツールチップコピー<button type="button" class="btn btn-secondary mb-2 mb-md-0" data-toggle="tooltip" data-placement="bottom" title="下に出るツールチップ">ツールチップ(下)</button>

左に出るツールチップコピー<button type="button" class="btn btn-secondary mb-2 mb-md-0" data-toggle="tooltip" data-placement="left" title="左に出るツールチップ">ツールチップ(左)</button>

2. HTML付きツールチップ

カスタムHTMLを追加：

見本

設定例

コピー<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-html="true" title="<b>HTML</b><u>付き</u><em>ツールチップ</em>"</span>>
	HTML付きツールチップ
</button>

使用方法（Usage）

ツールチッププラグインはオンデマンドでコンテンツとマークアップを生成し、デフォルトではツールチップをそのトリガー要素の後に置く。

JavaScript経由でツールチップを起動：

JavaScript$('#example').tooltip(options)

JavaScript$('#example').tooltip({ boundary: 'window' })

マークアップ（Markup）

ツールチップに必要なマークアップは、ツールチップを表示したいHTML要素に data 属性と title をつけるだけ。生成されるツールチップのマークアップはかなりシンプルだが、表示される位置の設定が必要（デフォルトでは、プラグインによって top に設定）。

<!--HTMLコードの記載 -->
<a href="#" data-toggle="tooltip" title="いくつかのツールチップテキスト！">この上にマウスポインターを移動</a>

<!-- プラグインによる一般的なマークアップ -->
<div class="tooltip bs-tooltip-top bs-tooltip-top-docs" role="tooltip">
	<div class="arrow"></div>
	<div class="tooltip-inner">
		いくつかのツールチップテキスト！
	</div>
</div>

無効な要素（Disabled elements）

disabled 属性を持つ要素はインタラクティブではないため、ユーザーがフォーカス、ホバーまたはクリックしてツールチップ（またはポップオーバー）を起動することは不可。回避策として tabindex="0" を使用して理想的にキーボードフォーカスを可能にしたラッパーの <div> または <span> からツールチップを起動し、無効化された要素の pointer-events を上書きする必要がある。

見本

設定例

コピー<span class="d-inline-block" tabindex="0" data-toggle="tooltip" title="無効要素のツールチップ">
	<button type="button" class="btn btn-primary" style="pointer-events: none;" disabled>無効ボタン</button>
</span>

オプション（Options）サンプル v4.4.0一部追加

オプションは、データの属性やJavaScriptを使用して渡すことが可能。データ属性の場合は、data-animation="" のように、data- にオプション名を追加。

メソッド（Methods）サンプル

$().tooltip(options)

要素コレクションにツールチップのハンドラーを付ける。

.tooltip('show')

要素のツールチップを表示。実際にツールチップが表示される前（つまり shown.bs.tooltip イベント発動前）に呼び出し元に戻る。これは、ツールチップの"manual"トリガーとみなされる。タイトルが長さゼロのツールチップは表示されない。

JavaScript$('#element').tooltip('show')

.tooltip('hide')

要素のツールチップを非表示にする。ツールチップが実際に非表示になる前（つまり hidden.bs.tooltip イベント発動前）に呼び出し元に戻る。これは、ツールチップの"manual"トリガーとみなされる。

JavaScript$('#element').tooltip('hide')

.tooltip('toggle')

要素のツールチップを切り替える。ツールチップが実際に表示または非表示になる前（つまり shown.bs.tooltip または hidden.bs.tooltip イベント発動前）に呼び出し元に戻る。これは、ツールチップの"manual"トリガーとみなされる。

JavaScript$('#element').tooltip('toggle')

.tooltip('dispose') v4.0.0名称変更

要素のツールチップを非表示にしたり破棄したりする。（selector オプションを使用して作成される）デリゲートを使用するツールチップは、子孫トリガー要素で個別に破棄できない。

JavaScript$('#element').tooltip('dispose')

.tooltip('enable') v4.0.0追加

要素のツールチップに表示する機能を与える。デフォルトで有効。

JavaScript$('#element').tooltip('enable')

.tooltip('disable') v4.0.0追加

要素のツールチップが表示されるようにする機能を削除。ツールチップは、再度有効になっている場合にのみ表示可能。

JavaScript$('#element').tooltip('disable')

.tooltip('toggleEnabled') v4.0.0追加

要素のツールチップが表示または非表示になるように切り替える。

JavaScript$('#element').tooltip('toggleEnabled')

.tooltip('update') v4.0.0追加

要素のツールチップの位置を更新。

JavaScript$('#element').tooltip('update')

イベント（Events）

使用例

JavaScript$('#myTooltip').on('hidden.bs.tooltip', function () {
	// 何かをする...
})