ぱそくま ろご
開発 > Bootstrap > Bootstrap ツールチップ

Bootstrap ツールチップ

Bootstrap ツールチップ

ツールチップはボタンなどにフォーカスを当てると、ふわっと出てくるヒントのような表示欄です。Bootstrapを使うと簡単にツールチップが設定できます。 ツールチップはパフォーマンスの理由により、デフォルトではオフになっているので明示的にオン(opt-in)する必要があります。

  1. buttonタグなどツールチップを表示させたいタグにdata-toggle="xxxxx"を追加。
  2. ツールチップに表示する内容をtitle属性に記述。
  3. ツールチップを有効にするため
       $(function () {
         $('[data-toggle="xxxxx"]').tooltip();
       });
     
    をheadタグに追加する。

とこれだけです。なお、「$('[data-toggle="xxxxx"]').tooltip();」を呼ぶと全てのツールチップが自動で有効になります。 個別にツールチップの有効等々をしたい場合は、$([対象]).tooltip('show | hide | toggle | dispose')を使います。



例:Bootstrap ツールチップ


  <head>
.
.
    <!-- jQuery first, then Tether, then Bootstrap JS. -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"
            integrity="sha384-THPy051/pYDQGanwU6poAc/hOdQxjnOEXzbT+OuUAFqNqFjL+4IGLBgCJC3ZOShY" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.min.js"
            integrity="sha384-Plbmg8JY28KFelvJVai01l8WyZzrYWG825m+cZ0eDDS1f7d/js6ikvy1+X+guPIB" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/js/bootstrap.min.js"
            integrity="sha384-VjEeINv9OSwtWFLAtmc4JCtEJXXBub00gtSnszmspDLCtC0I4z4nqz7rEFbIZLLU" crossorigin="anonymous"></script>

    <!-- ツールチップを有効にする。 -->
    <script>
      $(function () {
      $('[data-toggle="tooltip"]').tooltip();
      });
    </script>
  </head>

  <body>
  <div>
    <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="これはツールチップのサンプルです。">
      ツールチップが表示されます。
    </button>
  </div>

例:Bootstrap ツールチップの表示

ツールチップのオプション

ツールチップは表示位置や表示方法などのオプションが指定できます。 オプションの指定方法はdata-xx属性を使います。例えば、<button data-animation="true">などです。

ツールチップのオプション
オプション データ型 デフォルト値 説明
animation boolean true trueにすると、アニメーション効果で表示します。
container string false
delay number | object 0 表示または非表示までの時間を設定します。 これらを個別で指定したい場合はdelay: { "show": 500, "hide": 100 }のようにオブジェクト形式で指定します。
html boolean false trueにすると、ツールチップで表示するtitle属性の値をhtml形式として扱います。falseの場合は、テキストとして扱いますが、その仕組み上(jQueryのtextメソッドを使用することになります。)、XSS(クロスサイトスクリプティング)攻撃の恐れもあり、trueにしたほうが良いかと。
placement string | function 'top' ツールチップの表示位置になります。top | bottom | left | right | autoから選択します。
selector string false
template string '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'
title string | element | function ''
trigger string 'hover focus' click | hover | focus | manualから選択。