Popovers
Popovers(ポップオーバー)についてのドキュメントと例です。ポップオーバーの使い方の例を示します。
Overview
Popover Pluginを使用するときに知っておくべきこと：
- 第三者のライブラリ Popper.js で位置を取得します。bootstrap.jsの前にpopper.min.js を含めるか Popper.jsを含む
bootstrap.bundle.min.jsかbootstrap.bundle.jsを使用する必要があります。 - 依存関係として tooltip plugin が必要です。
- ソースからJavaScriptを部いるどする場合は requires
util.jsが必要です。 - パフォーマンス上の理由からオプトインするので, 自分で初期化する必要があります。
- 長さが0の
titleやcontentはポップオーバーを表示されません container: 'body'を指定すると, 複雑なコンポーネント（インプットグループ,ボタングループなど）のレンダリングの問題が回避可能です。- 非表示要素のポップオーバーは機能しません。
.disabled,disabled要素のポップオーバーはそれを囲む要素で起動する必要があります。- 複数行にまたがるアンカーからトリガーすると, アンカーの全体的な幅の中央にポップオーバーが配置されます。この動作を避けるために
<a>にtext-nowrapを使用します。 - ポップオーバーは, 対応する要素がDOMから削除される前に非表示にする必要があります。
どのように動作するかは下記を参考にしてください。
Example: Enable popovers everywhere
ページ上のすべてのポップオーバーを初期化する方法の1つは data-toggle 属性でそれらを選択することです。
$(function () {
$('[data-toggle="popover"]').popover()
})Example: Using the container option
ポップオーバーに干渉するスタイルが親要素にある場合は, ポップオーバーのHTMLが代わりにその要素内に表示されるように container の指定をすることを推奨します。
$(function () {
$('.example-popover').popover({
container: 'body'
})
})Example
<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>Four directions
上, 右, 下, 左の4つのオプションがあります。
<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>Dismiss on next click
focus を使用して, トグル要素とは別の要素の次のクリックに対するポップオーバーを閉じます。
Specific markup required for dismiss-on-next-click
クロスプラットフォーム及びクロスブラウザ環境における適切な動作のためには, 必ず <a> タグを使い, <button> タグは使わないようにします。
また必ず tabindex 属性を含めるようにします。
<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'
})Disabled elements
disabled 属性を持つ要素はインタラクティブではないため,ユーザーがカーソルを移動したりクリックしてポップオーバー（またはツールチップ）をトリガーすることはできません。
ラッパーの <div> や <span> からポップオーバーを起動し, 無効化された要素の pointer-events を上書きする必要があります。
無効化されたポップオーバーのトリガーの場合, 無効化された要素をクリックすると予想されないため, ポップオーバーがユーザーに視覚的なフィードバックとしてすぐに表示されるように data-trigger="hover" を適用することもできます。
<span class="d-inline-block" data-toggle="popover" data-content="Disabled popover">
<button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Disabled button</button>
</span>Usage
JavaScriptでポップオーバーを有効にします：
$('#example').popover(options)Options
オプションは, データ属性またはJavaScriptを使用して渡すことが可能です。データ属性の場合, data- にオプション名を追加できます。
| Name | Type | Default | Description |
|---|---|---|---|
| animation | boolean | true | Apply a CSS fade transition to the popover |
| container | string | element | false | false |
Appends the popover to a specific element. Example: |
| content | string | element | function | '' |
Default content value if If a function is given, it will be called with its |
| delay | number | object | 0 |
Delay showing and hiding the popover (ms) - does not apply to manual trigger type If a number is supplied, delay is applied to both hide/show Object structure is: |
| html | boolean | false | Insert HTML into the popover. If false, jQuery's text method will be used to insert content into the DOM. Use text if you're worried about XSS attacks. |
| placement | string | function | 'right' |
How to position the popover - auto | top | bottom | left | right. When a function is used to determine the placement, it is called with the popover DOM node as its first argument and the triggering element DOM node as its second. The |
| selector | string | false | false | If a selector is provided, popover objects will be delegated to the specified targets. In practice, this is used to enable dynamic HTML content to have popovers added. See this and an informative example. |
| template | string | '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>' |
Base HTML to use when creating the popover. The popover's The popover's
The outermost wrapper element should have the |
| title | string | element | function | '' |
Default title value if If a function is given, it will be called with its |
| trigger | string | 'click' | How popover is triggered - click | hover | focus | manual. You may pass multiple triggers; separate them with a space. manual cannot be combined with any other trigger. |
| offset | number | string | 0 | Offset of the popover relative to its target. For more information refer to Popper.js's offset docs. |
| fallbackPlacement | string | array | 'flip' | Allow to specify which position Popper will use on fallback. For more information refer to Popper.js's behavior docs |
| boundary | string | element | 'scrollParent' | Overflow constraint boundary of the popover. Accepts the values of 'viewport', 'window', 'scrollParent', or an HTMLElement reference (JavaScript only). For more information refer to Popper.js's preventOverflow docs. |
Data attributes for individual popovers
それぞれの Popovers のオプションは上で説明されている data 属性を用いることでも指定できます。
Methods
Asynchronous methods and transitions
すべての API メソッドは非同期であり, 遷移を開始します。 これらは遷移が始まってすぐ, それが終わる前に return されます。 加えて, 遷移中のコンポーネントから呼ばれたメソッドは無視されます。
$().popover(options)
ポップオーバーを初期化します。
.popover('show')
ポップオーバーを表示します。実際にポップオーバーが表示される前（ show.bs.popover の発動前）に呼び出し元に戻ります。
ポップオーバーの "manual" トリガーとみなされます。タイトルとコンテンツの両方が長さゼロのポップオーバーは決して表示されません。
$('#element').popover('show').popover('hide')
ポップオーバーを非表示にします。ポップオーバーが実際に隠される前（ hidden.bs.popover が発生する前）に呼び出し元に戻ります。手動のトリガとみなされます。
$('#element').popover('hide').popover('toggle')
ポップオーバーを切り替えます。ポップオーバーの前に呼び出し元に戻りますが, 実際に表示または非表示にされている（ shown.bs.popover , hidden.bs.popover が発生します）。手動のトリガとみなされます。
$('#element').popover('toggle').popover('dispose')
ポップオーバーを隠したり破棄したりします。（ the selector option で作成されます。）子孫トリガー要素で個別に破棄することはできません。
$('#element').popover('dispose').popover('enable')
ポップオーバーに表示する機能を与えます。デフォルトでは, ポップオーバーが有効になっています。
$('#element').popover('enable').popover('disable')
ポップオーバーが表示されるようにする機能を削除します。ポップオーバーは, 再び有効にされた場合にのみ表示することができます。
$('#element').popover('disable').popover('toggleEnabled')
ポップオーバーが表示または非表示になるように切り替えます。
$('#element').popover('toggleEnabled').popover('update')
ポップオーバーの位置を更新します。
$('#element').popover('update')Events
| Event Type | Description |
|---|---|
| show.bs.popover | このイベントは show インスタンスメソッドが呼ばれたときすぐに発生します。 |
| shown.bs.popover | このイベントは Popover がユーザに見えるようになったときに発生します（CSS による遷移を待機します） |
| hide.bs.popover | このイベントは hide インスタンスメソッドが呼ばれたときにすぐに発生します。 |
| hidden.bs.popover | このイベントは Popover がユーザから不可視になった直後に発生します（CSS による遷移を待機します）。 |
| inserted.bs.popover | このイベントは Popoover テンプレートが DOM に追加されたとき, show.bs.popover イベントのあとに発生します。 |
$('#myPopover').on('hidden.bs.popover', function () {
// do something…
})v4.4