Bootstrapのtooltipの使い方をサンプルコード付き解説！
この記事では、Bootstrapのtooltipの使い方をサンプルコード付きで解説します！基本的なtooltipの作り方と、Bootstrapに用意されているオプションも紹介します。tooltipはわかりやすいWebページを作成する手助けになります！
Bootstrapのtooltipとは？
tooltipとは、上の画像のように、要素の上にマウスオーバーした際(hoverした際)に説明文を表示する機能のことです。
Bootstrapでは、このtooltipを簡単に作成することができます！
Bootstrapのtooltipの使い方
それではBootstrapを使ってtooltipを作るやり方を解説していきます。
まず、ツールチップの機能をつけたい要素に、data-toggle="tooltip"の属性を追記します。
次に、説明文として表示したい内容をtitle属性で指定します。
tooltipの設定
<button class="btn btn-primary" data-toggle="tooltip" title="Twitterで共有する">Twitter</button>これで要素にツールチップを適用させることができました。
次に、ツールチップを実際に機能させるにはJavascriptを呼び出す必要があります。
以下のコードをbody要素の最後に書くだけでOKです。
JavaScriptでtooltipを有効にする
<script>$('[data-toggle="tooltip"]').tooltip()</script>コードの全体とプレビューは以下のようになります。
上記のサンプルでは、Twitterとfacebookのアイコンでツールチップの挙動が違うことに気が付きましたか？
例えば、Twitterのアイコンはマウスオーバーした(hoverした)時に説明文が表示されるのに対し、facebookのアイコンはクリックした時に説明文が出てきます。
実は、facebookのアイコンの方ではオプションをいくつか使用して、Twitterのアイコンとは違う動きをするように設定しています。次はそのオプションについて紹介します。
Bootstrapのtooltipのオプション
tooltipには、様々なオプションがあります。その中でも、主によく使うものを紹介します。
オプションは、属性として data-オプション名="値"というように指定します。
animation... tooltip表示時にアニメーションを使用するかどうかを「true」か「false」で指定します。（デフォルトではtrue）-
placement... tooltipを表示する位置を右(right)左(left)上(top)下(bottom)で指定します。（デフォルトでは上） trigger... tooltipを表示するトリガーを「hover」「click」「focus」「manual」の中から指定します。（デフォルトではhover）html... tooltipの中身（説明文の部分）をテキストではなく、HTMLとして読み取るかどうかを「true」か「false」で指定します。（デフォルトではfalse）
その他にもいくつかのオプションが用意されています。他にも知りたい人は以下のリンクから公式サイトへ行き、確認してください。
Bootstrapのtooltipの関連情報
Qumeruマガジンでは他にもtooltipについての記事を用意しています！実際にtooltipを使ってみて困った時には是非こちらも見てみてください！
