.NET開発者のためのブログメディア
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に以下のように記述してください。
|
1 |
$('[data-toggle="tooltip"]').tooltip(); |
BootstrapでのTooltipの使い方に興味のある方はぜひご覧ください。
data-placementオプション
Bootstrapでは、data-placementオプションでTooltipの出現方向を指定できます。
実際のソースコードを見てみましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<button type="button" class="btn btn-primary" data-toggle="tooltip" title="Tooltip"> Tooltip </button> <button type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="Tooltip on top"> Tooltip(top) </button> <button type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="right" title="Tooltip on right"> Tooltip(right) </button> <button type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom"> Tooltip(bottom) </button> <button type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="left" title="Tooltip on left"> Tooltip(left) </button> |
実行結果は以下のようになります。
See the Pen
bootstrap_tooltip1 by kskumd (@kskumd)
on CodePen.
このように、Bootstrapではdata-placementオプションでTooltipの出現方向を指定できます。
data-htmlオプション
Bootstrapでは、data-htmlオプションでTooltipにhtmlを記述できます。
実際のソースコードを見てみましょう。
|
1 2 3 |
<button type="button" class="btn btn-primary" data-toggle="tooltip" data-html="true" title="<b>Tooltip</b> <u>data</u> <strike>HTML</strike><br>Tooltip"> Tooltip data HTML </button> |
実行結果は以下のようになります。
See the Pen
bootstrap_tooltip2 by kskumd (@kskumd)
on CodePen.
このように、Bootstrapではdata-htmlオプションでTooltipにhtmlを記述できます。
data-delayオプション
Bootstrapでは、data-delayオプションでTooltipの表示遅延を指定できます。
実際のソースコードを見てみましょう。
|
1 2 3 4 5 6 7 8 9 |
<button type="button" class="btn btn-primary" data-toggle="tooltip" data-html="true" data-delay="500" title="delay 500"> delay 500 </button> <button type="button" class="btn btn-primary" data-toggle="tooltip" data-html="true" data-delay="1000" title="delay 1000"> delay 1000 </button> <button type="button" class="btn btn-primary" data-toggle="tooltip" data-html="true" data-delay="2000" title="delay 2000"> delay 2000 </button> |
実行結果は以下のようになります。
See the Pen
bootstrap_tooltip3 by kskumd (@kskumd)
on CodePen.
このように、Bootstrapではdata-delayオプションでTooltipの表示遅延を指定できます。
data-triggerオプション
Bootstrapでは、data-triggerオプションでTooltipの表示方法を指定できます。
実際のソースコードを見てみましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<button type="button" class="btn btn-primary" data-toggle="tooltip" data-html="true" data-trigger="click" title="click"> click </button> <button type="button" class="btn btn-primary" data-toggle="tooltip" data-html="true" data-trigger="hover" title="hover"> hover </button> <button type="button" class="btn btn-primary" data-toggle="tooltip" data-html="true" data-trigger="focus" title="focus"> focus </button> <button type="button" class="btn btn-primary" data-toggle="tooltip" data-html="true" data-trigger="manual" title="manual"> manual </button> |
実行結果は以下のようになります。
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のオプションはありますので、調査してみてください。
ぜひご自身でソースコードを書いて、理解を深めてください。
