ツールチップのサンプル
「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.