.net column
.NET開発者のためのブログメディア

BootstrapでのTooltipの使い方とは?Tooltipのオプションも紹介

 
BootstrapでのTooltipの使い方とは?Tooltipのオプションも紹介
SE
BootstrapでのTooltipとはどのようなものでしょうか。
PM
Tooltipとは、要素にマウスオーバーした際に注釈などが表示されるものです。Tooltipには様々なオプションがあります。

BootstrapでのTooltipの使い方とは?


今回は、BootstrapでのTooltipの使い方について説明します。Tooltipとは、要素にマウスオーバーした際に注釈などが表示されるものです。Tooltipには様々なオプションがあります。

ここでは、以下のオプションについて紹介します。
・data-placement:出現方向を指定
・data-html:htmlを記述
・data-delay:表示遅延を指定
・data-trigger:表示方法を指定

Tooltipを使用するには、JavaScriptに以下のように記述してください。

BootstrapでのTooltipの使い方に興味のある方はぜひご覧ください。

data-placementオプション

Bootstrapでは、data-placementオプションでTooltipの出現方向を指定できます。

実際のソースコードを見てみましょう。

実行結果は以下のようになります。

See the Pen
bootstrap_tooltip1
by kskumd (@kskumd)
on CodePen.


このように、Bootstrapではdata-placementオプションでTooltipの出現方向を指定できます。

data-htmlオプション

Bootstrapでは、data-htmlオプションでTooltipにhtmlを記述できます。

実際のソースコードを見てみましょう。

実行結果は以下のようになります。

See the Pen
bootstrap_tooltip2
by kskumd (@kskumd)
on CodePen.


このように、Bootstrapではdata-htmlオプションでTooltipにhtmlを記述できます。

data-delayオプション

Bootstrapでは、data-delayオプションでTooltipの表示遅延を指定できます。

実際のソースコードを見てみましょう。

実行結果は以下のようになります。

See the Pen
bootstrap_tooltip3
by kskumd (@kskumd)
on CodePen.


このように、Bootstrapではdata-delayオプションでTooltipの表示遅延を指定できます。

data-triggerオプション

Bootstrapでは、data-triggerオプションでTooltipの表示方法を指定できます。

実際のソースコードを見てみましょう。

実行結果は以下のようになります。

See the Pen
bootstrap_tooltip4
by kskumd (@kskumd)
on CodePen.


このように、Bootstrapではdata-triggerオプションでTooltipの表示方法を指定できます。

SE
BootstrapでのTooltipの使い方について理解できました。
PM
BootstrapでのTooltipの理解を深めるために、自分でソースコードを書いてみましょう。

まとめ

BootstrapでのTooltipの使い方について説明しました。

ここで紹介したTooltipのオプションは以下の通りです。
・data-placement:出現方向を指定
・data-html:htmlを記述
・data-delay:表示遅延を指定
・data-trigger:表示方法を指定

これ以外にもTooltipのオプションはありますので、調査してみてください。

ぜひご自身でソースコードを書いて、理解を深めてください。


.NET分野でのキャリアアップをお考えの方は、現在募集中の求人情報をご覧ください。

また、直接のエントリーも受け付けております。

エントリー(応募フォーム)

Search

Popular

reccomended

Categories

Tags