編集 Github

ポップオーバー - プロ 成分

iOSで見られるようなBootstrapポップオーバーをあなたのサイトのあらゆる要素に追加するためのドキュメントと例。

静的ポップオーバー

上、右、下、左揃えの4つのオプションがあります。

Popover top

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover right

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover bottom

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover left

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

ライブデモ

<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" data-container="body" data-original-title="Popover Title" data-content="And here's some amazing content. It's very engaging. Right?" data-color="primary">Click to toggle popover</button>

四方

<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>

次のクリックで閉じる

ユーザーがトグル要素とは異なる要素を次にクリックしたときにポップオーバーを閉じるには、 focusトリガーを使用します。

次のクリックで非表示に必要な特定のマークアップ

適切なクロスブラウザおよびクロスプラットフォームの動作のためには、 <a>タグを使用し、_not_は <button>タグを使用し、[tabindex]（https：//developer.mozillaを含める必要があります .org / en-US / docs / Web / HTML / Global_attributes / tabindex）属性。

Dismissible popover 
<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>
$('.popover-dismiss').popover({
  trigger: 'focus'
})

あなたがより多くの例と特性を見たいと思うならば、公式をチェックしてください Bootstrap Documentation.