【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>

<!DOCTYPE html>

<head>

(function() {

window.addEventListener("load", function() {

$('[data-toggle="tooltip"]').tooltip();

});

})();

</script>

<!--[if lt IE 9]>

<![endif]-->

</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>

</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>

(function() {

window.addEventListener("load", function() {

$('[data-toggle="tooltip"]').tooltip();

});

})();

</script>

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

解説

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

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

- data-toggle=”tooltip”
- data-placement=”bottom”
- title=”ツールチップで表示したいテキスト“

ツールチップの表示位置を変更したい場合は以下の属性を追加してください。

- data-placement=”top”　上に表示
- data-placement=”bottom”　下に表示
- data-placement=”left”　左に表示
- data-placement=”right”　右に表示

また、以下の属性を追加するとツールチップ内の情報をhtmlで記述できます。

- data-html=”true”

まとめ

ツールチップは、使用するために前提条件があるので、使おうとした時に思ったように結果が出ないと思うことがあるかもしれません。
そういう時はマニュアルやリファレンスをよく読みなおすと、改善のヒントが載っていることが多いです。

そして、今回もChromeのデベロッパーツールに助けられました。
動作確認の時に開いておくだけでも、どのコードがどこに影響しているのか解りやすいので、理解度が跳ね上がります。

今回はここまでです。
次回もよろしくお願いします。