Bootstrap

Bootstrapでツールチップ（Tooltip）を作る方法

2022年7月16日 by single コメントはまだありません

Bootstrapでツールチップ（Tooltip）を作る方法

デモ

HTMLコード

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
   <title>Bootstrap Tooltip demo</title>
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  <!-- JSファイル読み込み -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
  <style type="text/css">
    .red div  {
      background-color:red;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="row">
      <div><h4>サンプル１（デフォルト）</h4></div>
      <div>
        <br />
        <p>
          <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top"  title="ツールチップ（上）">
            ツールチップ（上）
          </button>
        </p>
        <p>
        <a href="#" data-bs-toggle="tooltip" data-bs-placement="right" title="ツールチップ（右）">
          ツールチップ（右）
        </a>
        </p>
        <p>
          <img src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC04799.jpg" style="width:20%;height:20%" data-bs-toggle="tooltip" data-bs-placement="bottom" title="ツールチップ（下）" />
        </p>
        <p>
          <input type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left" title="ツールチップ（左）" value="ツールチップ（左）" />
        </p>
      </div>
      <script type="text/javascript">
        var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
        var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
          return new bootstrap.Tooltip(tooltipTriggerEl)
        });
        </script>
    </div><!-- row -->
    <div class="row">
      <div><h4>サンプル２（HTML）</h4></div>
      <p>
        <button type="button" class="btn btn-secondary" id="example1"  data-bs-html="true"  title="<strong>HTML</strong><br />改行あり">
          ツールチップ（HTML）
        </button>
      </p>
      <script type="text/javascript">
        var options = {delay:{ "show": 100, "hide": 500 }, placement:'right',template:'<div><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>',customClass:'red'};
        var exampleEl = document.getElementById('example1');
        var tooltip = new bootstrap.Tooltip(exampleEl, options);
      </script>
      <p>
        <button type="button" class="btn btn-secondary" id="example2">
          ツールチップ（HTML）;jQuery
        </button>
      </p>
      <!-- jQueryを利用するのでjQueryを読み込む -->
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
      <script type="text/javascript">
        $(function () {
          $('#example2').tooltip({html:true,title:'<strong>HTML</strong><br />改行あり<br />jQuery'});
        });
      </script>
    </div><!-- row -->
    <div class="row">
      <div><h4>サンプル３（初期表示）</h4></div>
      <p>
        <button type="button" class="btn btn-secondary" id="example3" title="初期表示">
          初期表示ツールチップ
        </button>
      </p>
      <script type="text/javascript">
        var options = {delay:{ "show": 100, "hide": 500 }, placement:'auto'};
        var exampleEl = document.getElementById('example3');
        var tooltip = new bootstrap.Tooltip(exampleEl, options);
        tooltip.show();
      </script>
    </div><!-- row -->
  </div><!-- container -->
</body>
</html>

実装方法

Bootstrap導入

まず、BootstrapのCSSファイルとJSファイルを読み込みます。

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

導入方法の詳細は、以下のページをご覧ください。

ツールチップ実装

ツールチップ文字列設定
<button type="button" data-bs-toggle="tooltip" data-bs-placement="top" title="ツールチップ（右）">
  ボタンにツールチップ
</button>

まず、ツールチップを設定したいオブジェクトにtitle属性を設定し値にツールチップ内容を設定します。

リンクや画像でも同じようになります。

<a href="#" data-bs-toggle="tooltip" data-bs-placement="right" title="ツールチップ（下）">
<img src="(画像URI)" data-bs-toggle="tooltip" data-bs-placement="bottom" title="ツールチップ（下）" />
ツールチップ初期化

文字列を設定後、最後にJavascriptでTooltipオブジェクトを初期化して、ツールチップを有効化します。

Javascriptの場合

対象エレメントを取得し、初期化します。

<script type="text/javascript">
  var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
  var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
    return new bootstrap.Tooltip(tooltipTriggerEl)
  });
</script>

対象エレメントを取得し、「new bootstrap.Tooltip()」を実行し、初期化すれば、ツールチップ設定完了です。

jQueryの場合
<script type="text/javascript">
  $(function () {
    $('[data-bs-toggle="tooltip"]').tooltip();
  });
</script>

jQueryの場合は、セレクタでツールチップを設定したいオブジェクトを選択し、.tooltip()を実行し、初期化してください。

ツールチップにHTMLタグを設定する方法

Javascriptで初期化する際、渡すオプションで、または、HTMLの属性でツールチップのHTMLタグ有効化が可能です。なお、オプションのパラメータ名と属性の名称について、「オプションと属性の関係」をご覧ください。

HTMLの属性で有効化
<button type="button" id="example1"  data-bs-html="true"  title="<strong>HTML</strong><br />改行あり">
  ツールチップ（HTML）
</button>

属性に『data-bs-html』を設定し「true」を設定すれば、ツールチップにHTMLタグが有効化されます。

Javascriptで有効化
<button type="button" id="example2">
  ツールチップ（HTML）;jQuery
</button>
<script type="text/javascript">
  $(function () {
    $('#example2').tooltip({html:true,title:'<strong>HTML</strong><br />改行あり<br />jQuery'});
  });
</script>

初期化時に指定するオプションで『html』に「true」を設定すると、HTMLタグが有効化されます。

ツールチップのスタイルを変更する方法

オプションの「template」と「customCss」を利用することでスタイルも変更可能です。

ここではツールチップを赤くします。

CSSクラス定義
<style type="text/css">
  .red div  {
    background-color:red;
  }
</style>

まず、CSSクラスを定義しておきます。クラス名は「red」で背景色を赤くします。ただし、定義的には、指定クラスの下位のdivオブジェクトに適用するようにします。これは次のパラメータ「template」の定義に依存します。

オプション指定
<script type="text/javascript">
  var options = {template:'<div><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>',customClass:'red'};
  var exampleEl = document.getElementById('example1');
  var tooltip = new bootstrap.Tooltip(exampleEl, options);
</script>

まず、オプションで「customClass」に、定義していた『red』クラスを指定します。

また、オプション「template」には、ツールチップのデフォルト定義を指定しておきました。この定義でわかる通り、CSSクラス『red』は最上位のdivオブジェクトの下位のdivオブジェクトに適用されることがわかります。これで赤いツールチップが実現できます。以下のようになります。

実装された赤いツールチップ

オプション

オプションと属性の関係

オプションで指定できるパラメータはHTMLタグ内に属性としても設定可能です。ルールは以下の２つになります。

  1. Javascriptのオプション名にプレフィックス『data-bs-』を設定する
  2. オプション名が複数の単語から構成される場合は、単語間にハイフンを付け、かつ、大文字を小文字にする

例えば『customClass』というオプションは『data-bs-custom-class』という属性名に変わります。

なお、「sanitize」と「sanitizeF」、「allowList」はセキュリティの関係上、属性値に設定できません。

オプション紹介

いくつか代表的なオプションを紹介しておきます。

animation

ツールチップ表示、または非表示時、アニメーション効果をするかどうかのオプションです。デフォルトは「true」です。

delay

ツールチップ表示、または非表示されるまでの時間を指定できるオプションです。

デフォルトは「0」で遅延なしです。

指定する場合には「{ “show”: 500, “hide”: 100 }」のように配列で表示時（show）と非表示時（hide）の時間を各々、ミリ秒で指定してください。

html

ツールチップに指定できる文字列に、HTMLタグを利用することができるオプションです。

デフォルトは「false」でHTMLタグを利用することはできません。

placement

ツールチップの表示位置を指定できるオプションです。

デフォルトは「top」で、上部に表示されます。

そのほかには「right」「bottom」「left」も指定可能です。

さらに「auto」も指定可能で、この場合は、位置は自動調整されます。

template

ツールチップを生成する際のHTML定義を指定できるオプションです。

デフォルトは「<div class=”tooltip” role=”tooltip”><div class=”tooltip-arrow”></div><div class=”tooltip-inner”></div></div>」です。

title

ツールチップに表示する文字列を指定できるオプションです。

title属性が存在しない場合、このオプション指定文字列が使用されます。

trigger

ツールチップを表示するイベントを指定できるオプションです。

デフォルトは「hover focus」で、ホーバーイベントと、フォーカスイベントでツールチップが表示／非表示されます。

例えば「click」と指定すれば、クリックイベントでツールチップを表示／非表示させることができるようになります。

customClass

ツールチップにCSSクラスを追加で定義することのできるオプションです。

オプション「template」と合わせて利用するといいでしょう。

offset

ツールチップの表示位置のオフセット値を指定できます。デフォルトは「{0,0]」でX軸もY軸もともに０です。

ご参考

関連ページ