ポップオーバーのサンプル

オプションの使用例

解説はこちら。

animation（CSSのフェード遷移を適用）

●data-animation="true" デフォルトで設定されているので、あえて設定する必要はない。

See the Pen Bootstrap4ポップオーバーのdata-animation="true"の使用例 by cccabinet (@cccabinet) on CodePen.

●data-animation="false"

See the Pen Bootstrap4ポップオーバーのdata-animation="false"の使用例 by cccabinet (@cccabinet) on CodePen.

container（ポップオーバーを特定の要素に追加）

●data-container="body"（ボタングループ内にポップオーバーを設定する場合など）

See the Pen Bootstrap4ポップオーバーのdata-container="body"の使用例 by cccabinet (@cccabinet) on CodePen.

delay（ポップオーバーの表示および非表示を遅延する時間）

●data-delay="0" デフォルトで設定されているので、あえて設定する必要はない。

See the Pen Bootstrap4ポップオーバーのdata-delay="0"の使用例 by cccabinet (@cccabinet) on CodePen.

●data-delay="1000"（=1秒遅れ）

See the Pen Bootstrap4ポップオーバーのdata-delay="1000"の使用例 by cccabinet (@cccabinet) on CodePen.

●delay: {show: 5000, hide: 3000}（表示：5秒遅れ、非表示：3秒遅れ）

See the Pen Bootstrap4ポップオーバーのdelay: {show: 5000, hide: 3000}の使用例 by cccabinet (@cccabinet) on CodePen.

html（ポップオーバーに表示されているHTMLを挿入）

●data-html="true" デフォルトで設定されているので、あえて設定する必要はない。

See the Pen Bootstrap4ポップオーバーのdata-html="true"の使用例 by cccabinet (@cccabinet) on CodePen.

●data-html="false"

See the Pen Bootstrap4ポップオーバーのdata-html="false"の使用例 by cccabinet (@cccabinet) on CodePen.

trigger（ポップオーバーの起動方法）

●data-trigger="click"（デフォルト）

See the Pen Bootstrap4ポップオーバーのdata-trigger="click"の使用例 by cccabinet (@cccabinet) on CodePen.

●data-trigger="hover"

See the Pen Bootstrap4ポップオーバーのdata-trigger="hover"の使用例 by cccabinet (@cccabinet) on CodePen.

●data-trigger="focus"

See the Pen Bootstrap4ポップオーバーのdata-trigger="focus"の使用例 by cccabinet (@cccabinet) on CodePen.

●data-trigger="manual" ボタンを押すとリンク部分にポップオーバーが表示する例

See the Pen Bootstrap4ポップオーバーのdata-trigger="manual"の使用例 by cccabinet (@cccabinet) on CodePen.

offset（ターゲットに対するポップオーバーのオフセット値）

●data-offset="0" デフォルトで設定されているので、あえて設定する必要はない。

See the Pen Bootstrap4ポップオーバーのdata-offset="0"の使用例 by cccabinet (@cccabinet) on CodePen.

●data-offset="20%"（下へ20%分ずらす）

See the Pen Bootstrap4ポップオーバーのdata-offset="20%"の使用例 by cccabinet (@cccabinet) on CodePen.

●data-offset="10, 10"（下へ10px、右へ10pxずらす）

See the Pen Bootstrap4ポップオーバーのdata-offset="10,10"の使用例 by cccabinet (@cccabinet) on CodePen.

●data-offset="-10px + 5vh, 5px - 6%"（下へ-10px + 5vh分、右へ5px - 6%分ずらす）

See the Pen Bootstrap4ポップオーバーのdata-offset="-10px + 5vh, 5px - 6%"の使用例 by cccabinet (@cccabinet) on CodePen.

boundary（オーバーフローを制約する境界）

●data-boundary="scrollParent" デフォルトで設定されているので、あえて設定する必要はない。

See the Pen Bootstrap4ポップオーバーのdata-boundary="scrollParent"の使用例 by cccabinet (@cccabinet) on CodePen.

●data-boundary="window"

See the Pen Bootstrap4ポップオーバーのdata-boundary="scrollParent"の使用例 by cccabinet (@cccabinet) on CodePen.

●data-boundary="viewport"

See the Pen Bootstrap4ポップオーバーのdata-boundary="viewport"の使用例 by cccabinet (@cccabinet) on CodePen.