Bootstrap4 ポップアップボックス

ポップオーバーコントロールはツールチップに似ており、マウスが要素をクリックした後に表示されます。ツールチップと異なり、より多くのコンテンツを表示できます。

ポップアップボックスの作成方法

要素に追加することでdata-toggle="popover"ポップアップボックスを作成します。

title属性の内容はポップアップボックスのタイトルです。data-content属性はポップアップボックスのテキスト内容を表示します：

注意:ポップオーバーは jQuery の初期化コード内に記述し、その後指定された要素上で呼び出します。popover()方法。

以下の例では、ドキュメントのどこでもポップアップボックスを使用できます：

实例

$(document).ready(function(){ $('[data-toggle="popover"]').popover(); });

尝试一下 »

ポップアップボックスの位置を指定する

デフォルトでは、ポップオーバーは要素の右側に表示されます。

可以使用data-placement属性でポップアップボックスの表示方向を設定します: top、bottom、left または right:

实例

尝试一下 »

ボタンで使用:

实例

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> Popover on top </button> <button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> Popover on right </button> <button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> Popover on bottom </button> <button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> Popover on left </button>

尝试一下 »

关闭弹出框

デフォルトでは、ポップオーバーは指定された要素をもう一度クリックすると閉じます。次のプロパティを使用できます。data-trigger="focus"プロパティを使用して、マウスで要素の外部領域をクリックしたときにポップオーバーを閉じるよう設定します。

实例

尝试一下 »

提示:マウスが要素の上に移動したときに表示し、離れたときに消える効果を実現したい場合は、次のプロパティを使用できます。data-triggerプロパティを使用し、値を "hover" に設定します。

实例

<a href="#" title="Header" data-toggle="popover" data-trigger="hover" data-content="一些内容">マウスをここに移動</a>

尝试一下 »

其他扩展