ツールチップのサンプル

オプションの使用例

解説はこちら。

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.