ポップオーバー - 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" を指定する
