とほほのBootstrap 4入門

data-toggle="tooltip" は要素にマウスを乗せた際にツールチップを表示します。ツールチップに表示するメッセージを title="..." で指定します。

Sample

Code

<button type="button" class="btn btn-primary" data-toggle="tooltip" title="Tooltip message">
  Tooltip
</button>

下記の様な JavaScript をあらかじめ呼び出しておく必要があります。

Code

$('[data-toggle="tooltip"]').tooltip();

data-placement="..." でツールチップを表示する方向を top, right, bottom, left のいずれかで指定できます。

Sample

Code

<button type="button" data-toggle="tooltip" data-placement="right" ...>
  Right
</button>

data-*="..." もしくは JavaScript で下記のオプションを指定することができます。

Code

<div data-toggle="tooltip" data-placement="right" data-html="true">

Code

$(...).tooltip({placement:'right', html:true});

名前	型	規定値	説明
`animation`	boolean	true	ツールチップ表示時にアニメーションを利用するか否か。
`container`	string \| element \| false	false	ツールチップを追加する要素を指定します。通常は必要ありませんが、インプットグループやボタングループ等の中でツールチップを使用する際に、親要素のスタイルがツールチップに影響を与える場合、`container` に `'body'` を指定することでその問題を回避できることがあります。
`delay`	number \| object	0	表示・非表示を始めるまでの遅延時間をミリ秒単位で指定します。`{"show":500, "hide":100}` の様に個々に指定することもできます。
`html`	boolean	false	`content` をテキストではなく、HTML として指定可能か否かを指定します。`true` にする場合は、XSS 脆弱性に注意してください。
`placement`	string \| function	'top'	ツールチップを表示する方向を `top \| right \| bottom \| left \| auto` のいずれかで指定します。関数を指定して動的に決定することもできます。
`selector`	string \| false	false	ツールチップを表示する対象の要素を `'#btn1'` などの CSSセレクタで指定します。ダイナミックに追加された要素に対してツールチップを表示したい際に利用されます。
`template`	string	右記参照	ツールチップのテンプレートを指定します。デフォルトは `'<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>'` となっています。
`title`	string \| element \| function	''	ツールチップのタイトルを指定します。
`trigger`	string	'hover focus'	ツールチップを表示するトリガーを指定します。`click \| hover \| focus \| manual` を指定できます。`manual` 以外は空白文字で区切って複数指定可能です。
`offset`	number \| string	0	ツールチップを表示するオフセット位置を指定します。"100,200" の様に縦方向と横方向を指定することも可能です。(横方向しか動作しない？)
`fallbackPlacement`	string \| array	'flip'	ツールチップを表示する方式を指定します。`flip \| clockwise \| counterclockwise` のいずれかを指定できます。
`boundary`	string \| element	'scrollParent'	ドロップダウンがオーバーフローする際の制約境界を指定します。ビューポート(`viewport`)、ウィンドウ(`window`)、スクロールする親要素(`scrollParent`) や、JavaScript の場合は任意の HTML 要素を指定することができます。詳細は Popper.js の preventOverflow を参照してください。

ツールチップ

表示方向

オプション