Bootstrap4移行ガイドを読む(コンポーネント編、ポップオーバー)
- このコンポーネントを動作させるには
popper.js
が必要。ポップオーバーの位置を決めるのに使われる - ソースファイルから JavaScript を構築する場合は
util.js
が必要 - ツールチップコンポーネントと依存関係がある
title
とdata-content
属性に値が入ってないポップオーバーは表示されない- このコンポーネントの使い方
- こんな感じで書く
<a class="btn btn-lg btn-danger" data-toggle="popover" title="ポップオーバーのタイトル" data-content="ポップオーバーの説明。もう一度ボタンを押すと閉じます。">ココを押して下さい</a>
data-toggle="popover"
でポップオーバーを動作させるtitle
属性にタイトルを入れるdata-content
属性にコンテンツ(説明文)を入れる
- こんな感じで書く
data-placement
属性でポップオーバーの表示位置を指定できる- 上 ...
data-placement="top"
- 下 ...
data-placement="bottom"
- 左 ...
data-placement="left"
- 右 ...
data-placement="right"
- 上 ...
- 通常ポップオーバーはポップオーバーを表示させた切り換え要素をもう一度押すことで閉じる
- これを切り換え要素以外の場所を押したときに閉じるようにするには、
tabindex="0"
とdata-trigger="focus"
を指定する
- これを切り換え要素以外の場所を押したときに閉じるようにするには、