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

ツールチップのサンプル

「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="window"の使用例 by cccabinet (@cccabinet) on CodePen.

data-boundary="viewport"

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