ブートストラップ-ポップオーバープラグイン

ポップオーバーはツールチップに似ており、見出し付きの拡張ビューを提供します。ポップオーバーをアクティブにするには、ユーザーは要素の上にカーソルを置くだけです。ポップオーバーのコンテンツは、Bootstrap DataAPIを使用して完全に入力できます。この方法にはツールチップが必要です。

このプラグイン機能を個別に含めたい場合は、 popover.jsまた、ツールチッププラグインの依存関係があります。それ以外の場合は、「ブートストラッププラグインの概要」の章で説明したように、 bootstrap.jsまたは縮小された bootstrap.min.jsを含めることができます。

使用法

ポップオーバープラグインはオンデマンドでコンテンツとマークアップを生成し、デフォルトではトリガー要素の後にポップオーバーを配置します。次の2つの方法でポップオーバーを追加できます-

Via data attributes −ポップオーバーを追加するには、 data-toggle = "popover"アンカー/ボタンタグに。アンカーのタイトルは、ポップオーバーのテキストになります。デフォルトでは、ポップオーバーはプラグインによってトップに設定されています。

<a href = "#" data-toggle = "popover" title = "Example popover">
   Hover over me
</a>

Via JavaScript −次の構文を使用してJavaScript経由でポップオーバーを有効にします−

$('#identifier').popover(options)

ポップオーバープラグインだけではありません-ドロップダウンのようなcssプラグインや前の章で説明した他のプラグイン。このプラグインを使用するには、jqueryを使用してプラグインをアクティブ化する必要があります（javascriptを読んでください）。ページ上のすべてのポップオーバーを有効にするには、このスクリプトを使用するだけです-
$(function () { $("[data-toggle = 'popover']").popover(); });

例

次の例は、データ属性を介したポップオーバープラグインの使用法を示しています。

<div class = "container" style = "padding: 100px 50px 10px;" >
   <button type = "button" class = "btn btn-default" title = "Popover title"  
      data-container = "body" data-toggle = "popover" data-placement = "left" 
      data-content = "Some content in Popover on left">
      
      Popover on left
   </button>
   
   <button type = "button" class = "btn btn-primary" title = "Popover title"  
      data-container = "body" data-toggle = "popover" data-placement = "top" 
      data-content = "Some content in Popover on top">
      
      Popover on top
   </button>
   
   <button type = "button" class = "btn btn-success" title = "Popover title"  
      data-container = "body" data-toggle = "popover" data-placement = "bottom" 
      data-content = "Some content in Popover on bottom">
      
      Popover on bottom
   </button>
   
   <button type = "button" class = "btn btn-warning" title = "Popover title"  
      data-container = "body" data-toggle = "popover" data-placement = "right" 
      data-content = "Some content in Popover on right">
      
      Popover on right
   </button>
   
</div>

<script>
   $(function (){
      $("[data-toggle = 'popover']").popover();
   });
</script>

オプション

Bootstrap Data APIを介して追加したり、JavaScriptを介して呼び出すことができる特定のオプションがあります。次の表にオプションを示します-

オプション名	タイプ/デフォルト値	データ属性名	説明
アニメーション	ブールデフォルト-true	データアニメーション	CSSフェードトランジションをポップオーバーに適用します。
html	ブールデフォルト-false	data-html	ポップオーバーにHTMLを挿入します。falseの場合、jQueryのtextメソッドを使用してコンテンツをDOMに挿入します。XSS攻撃が心配な場合は、テキストを使用してください。
配置	文字列\|関数デフォルト-top	データ配置	ポップオーバーの配置方法を指定します（つまり、上\|下\|左\|右\|自動）。場合はautoが指定され、それが動的にポップオーバーを再配向します。たとえば、配置が「自動左」の場合、ポップオーバーは可能な場合は左に表示され、そうでない場合は右に表示されます。
セレクタ	文字列デフォルト-false	データセレクタ	セレクターが提供されている場合、ポップオーバーオブジェクトは指定されたターゲットに委任されます。
題名	文字列\| 関数デフォルト-"	データタイトル	title属性が存在しない場合、titleオプションがデフォルトのtitle値です。
引き金	文字列デフォルト-'ホバーフォーカス'	データトリガー	ポップオーバーがどのようにトリガーされるかを定義します- click\| hover \| focus \| manual。複数のトリガーを渡すことができます。それらをスペースで区切ります。
ディレイ	番号\| オブジェクトデフォルト− 0	データ遅延	ポップオーバーの表示と非表示の遅延（ミリ秒）—手動トリガータイプには適用されません。番号が指定されている場合、遅延は非表示/表示の両方に適用されます。オブジェクト構造は− `delay: { show: 500, hide: 100 }`
コンテナ	文字列\| falseデフォルト-false	データコンテナ	ポップオーバーを特定の要素に追加します。例：コンテナ： 'body'

メソッド

以下はポップオーバーのためのいくつかの便利な方法です-

方法	説明	例
Options − .popover（options）	ポップオーバーハンドラーを要素コレクションにアタッチします。	`$().popover(options)`
Toggle − .popover（ 'toggle'）	要素のポップオーバーを切り替えます。	`$('#element').popover('toggle')`
Show − .popover（ 'show'）	要素のポップオーバーを明らかにします。	`$('#element').popover('show')`
Hide − .popover（ 'hide'）	要素のポップオーバーを非表示にします。	`$('#element').popover('hide')`
Destroy − .popover（ 'destroy'）	要素のポップオーバーを非表示にして破棄します。	`$('#element').popover('destroy')`

例

次の例は、ポップオーバープラグインメソッドを示しています-

<div class = "container" style = "padding: 100px 50px 10px;" >
   <button type = "button" class = "btn btn-default popover-show" 
      title = "Popover title" data-container = "body" 
      data-toggle = "popover" data-placement = "left" 
      data-content = "Some content in Popover with show method">
      
      Popover on left
   </button>
   
   <button type = "button" class = "btn btn-primary popover-hide" 
      title = "Popover title" data-container = "body" 
      data-toggle = "popover" data-placement = "top" 
      data-content = "Some content in Popover-hide method">
      
      Popover on top
   </button>
   
   <button type = "button" class = "btn btn-success popover-destroy" 
      title = "Popover title" data-container = "body" 
      data-toggle = "popover" data-placement = "bottom" 
      data-content = "Some content in Popover-destroy method">
      
      Popover on bottom
   </button>
   
   <button type = "button" class = "btn btn-warning popover-toggle" 
      title = "Popover title" data-container = "body" 
      data-toggle = "popover" data-placement = "top" 
      data-content = "Some content in Popover-toggle method">
      
      Popover on right
   </button>
	
   <br><br><br><br><br><br>
   
   <p class = "popover-options">
      <a href = "#" type = "button" class = "btn btn-warning" 
         title = "<h2>Title</h2>" data-container = "body" 
         data-toggle = "popover" data-content = "
         <h4>Some content in Popover-options method</h4>">
         
         Popover
      </a>
   </p>
   
   <script>
      $(function () { $('.popover-show').popover('show');});
      $(function () { $('.popover-hide').popover('hide');});
      $(function () { $('.popover-destroy').popover('destroy');});
      $(function () { $('.popover-toggle').popover('toggle');});
      $(function () { $(".popover-options a").popover({html : true });});
   </script>
	
</div>

イベント

次の表に、ポップオーバープラグインで機能するイベントを示します。このイベントは、関数にフックするために使用できます。

イベント	説明	例
show.bs.popover	このイベントは、showinstanceメソッドが呼び出されるとすぐに発生します。	`$('#mypopover').on('show.bs.popover', function () { // do something })`
show.bs.popover	このイベントは、ポップオーバーがユーザーに表示されたときに発生します（CSS遷移が完了するのを待ちます）。	`$('#mypopover').on('shown.bs.popover', function () { // do something })`
hide.bs.popover	このイベントは、hideinstanceメソッドが呼び出されるとすぐに発生します。	`$('#mypopover').on('hide.bs.popover', function () { // do something })`
hidden.bs.popover	このイベントは、ポップオーバーがユーザーから隠され終わったときに発生します（CSS遷移が完了するのを待ちます）。	`$('#mypopover').on('hidden.bs.popover', function () { // do something })`

例

次の例は、Popoverプラグインイベントを示しています-

<div clas = "container" style = "padding: 100px 50px 10px;" >
   <button type = "button" class = "btn btn-primary popover-show" 
      title = "Popover title" data-container = "body" data-toggle = "popover" 
      data-content = "Some content in Popover with show method">
      
      Popover on left
   </button>
   
</div>

<script>
   $(function () { $('.popover-show').popover('show');});
   
   $(function () { $('.popover-show').on('shown.bs.popover', function () {
      alert("Alert message on show");
   })});
</script>