Bootstrap4移行ガイドを読む(コンポーネント編、ツールチップ)
- ツールチップは、オリジナルな
title
属性みたいなもの。リンクにカーソルを合わせたときに説明文が書かれた吹き出しを表示する - ツールチップはパフォーマンス上の理由で任意で取得されるため、自分で初期化する必要がある
data-toggle
属性で要素を選択することで、初期化できる
- 動作させるには
Popper.js
が必要- ツールチップの位置情報の取得に使う
- 動作させるには
util.js
も必要 title
が入力されていないツールチップは表示されない- ツールチップを表示したいリンクに
data-toggle="tooltip"
とtitle="ツールチップ文"
を指定するtitle
属性には HTML 要素を入れることもできる
data-placement
属性でポップオーバーの表示位置を指定できる- 上 ...
data-placement="top"
- 下 ...
data-placement="bottom"
- 左 ...
data-placement="left"
- 右 ...
data-placement="right"
- 上 ...