メインコンテンツへスキップ

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

「HTML」「CSS」「JS」の各タブを押すとコードが記載されているので、それをコピーしてお使い下さい。

オプションの使用例

解説はこちら

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.