【Bootstrap】ツールチップを設定しよう！

ツールチップについて

Bootstrapでは下記のようなツールチップを実装することができます。

（ツールチップとはカーソルを何かの項目に合わせたとき、その項目に覆いかぶさるような形で小さな枠が出現し、その枠内には選択された項目に関する補足情報が表示される機能です。）

TEST

ツールチップ設定手順

①ツールチップを表示させたい個所の編集

ツールチップを表示させたい個所をspanタグで囲い、data-toggle="tooltip" 、title=にツールチップに表示させたいテキストを入れます。好みに応じて太字や文字色をつけてください。

<span class="font-weight-bold text-info" data-toggle="tooltip" title="This is awesome">TEST</span> 

②scriptタグにjQueryで下記コードを追記します。このコードがないと動作しません。

$(function(){
　　'use strict';
　　$('[data-toggle="tooltip"]').tooltip();
　}); 

以上で完成です。