【Bootstrap】ツールチップの使い方

こんにちは朱夏です。

今回はBootstrapのツールチップの使い方を解説してみようと思います。
参考サイトはいつものこちらです。

Bootstrap4移行ガイド

ツールチップ～Bootstrap4移行ガイド

https://cccabinet.jpn.org/bootstrap4/components/tooltips

CSS3を使ってCSS3とアニメーション用のカスタムBootstrapツールチップを追加し、ローカルタイトルストレージ用のデータ属性を追加するための解説と例。

コード

先ずはすぐに使えるようにコードを置いておきます。
コピペするときは全てコピーして使ってみてくださいね。

<!DOCTYPE html>
<html lang="ja">
   <head>
      <meta charset="UTF-8"> 
      <title>タイトル</title>
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
      <link rel="stylesheet" href="css/style.css">
      <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
      <script src="https://kit.fontawesome.com/da0fa6be04.js" crossorigin="anonymous"></script>
      <script>
         (function() {
            window.addEventListener("load", function() {
               $('[data-toggle="tooltip"]').tooltip();
            });
         })();
      </script>

      <!--[if lt IE 9]>
      <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
      <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
      <![endif]-->
   <script src="js/sample.js"></script>
   </head>
   <body>
      <h1>ツールチップテスト</h1>
   <div>
      <p><a href="#" data-toggle="tooltip" title="ツールチップ">ここ</a>にカーソルを合わせるとツールチップが出てきます。</p>
      <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="ツールチップですよ">ツールチップ</button>
      <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-html="true" title="Tooltipで<br>HTMLタグ<br><strong>使えます</strong>">HTMLツールチップ</button>
      <img src="画像のパス" width="200px" alt="画像"" data-toggle="tooltip" data-html="true" title="画像にツールチップ">
   </div>
</html>

正常に動作していればマウスカーソルを合わせると吹き出しが出てくるはずです。

前提条件

最初に注意しないといけないことがあります。
ツールチップを正常に動作させるには、2つの前提条件があります。
前提条件を満たしていないと、想定と違った表示が出てくると思います。

前提条件

　1.popper.jsが読み込まれている事
　2.tooltipのJavaScriptが呼び出されている事

1.popper.jsが読み込まれている事
Bootstrap4を使用している方は、導入時にほとんどの場合一緒に組み込まれているはずです。
ツールチップを正常に動作させるための.jsファイルを読み込んでおく必要があるということです。
条件を満たしていれば、bootstrap.bundle.jsを使用するなどいくつかの方法でクリアできるようです。

2.tooltipのJavaScriptが呼び出されている事
他のBootstrapの機能と違い、事前に呼び出しが必要の様です。
呼び出しには、<head></head>タグ内に以下のコードを張り付けておけばOKです。

<script>
   (function() {
      window.addEventListener("load", function() {
         $('[data-toggle="tooltip"]').tooltip();
      });
   })();
</script>

これで、想定通り、吹き出し型のツールチップが表示されるはずです。

解説

それでは、順番に解説していきたいと思います。

ツールチップは、主にテキスト、ボタン、動画などに適用する事が出来るようです。
必須となる属性が3つあります。