Bootstrapのtooltipが表示されない場合の対処法！
この記事では、Bootstrapのtooltipが表示されない問題の解決方法を紹介します。Bootstrapのtooltipは様々な原因によりうまく表示されないことがあります。そのような場合の原因と対処法について解説します。
Bootstrapのtooltipが表示されない場合の対処法
Bootstrapを使うと簡単にtooltipを実装できますが、きちんと動かすために注意すべき点がいくつかあります。
それを間違えると表示されなくなってしまう事があるので、しっかり確認しましょう！
スクリプトをきちんと記述する
ツールチップを実装する際には、ツールチップを表示させたい要素に以下のようにdata-toggle属性などを追加していきます。
tooltipを設定する属性
<button class="btn btn-primary "data-toggle="tooltip" data-placement="bottom"title="ボタンです">しかし、これだけではtooltipは表示されないと思います。tooltipを表示させるには、このように属性を追記するだけでは不十分で、tooltipを動かすためのスクリプトを記述する必要があります。
tooltipを動かすスクリプト
<script>$('[data-toggle="tooltip"]').tooltip()</script>基本的には上記のコードを記述すればよいです。これは、「data-toggle属性の値が"tooptip"の要素に対してtooltip()という関数を実行する」という意味のJavascriptになります。tooltip()という関数はBootstrapに用意されているため、自分で書く必要はありません。
ただし、動的な要素に関してはこれだけでは不十分です。詳しくは以下の記事を参照してください。
jQueryと競合してしまっている
実はjQueryにもtooltipというのがあり、そちらと競合（コンフリクト）してしまうことがあります。そうするとうまく動かないので、競合しないようにする必要があります。
まず、bodyの最後の部分でいくつかJavascriptファイルを読み込んでいると思いますが、その順番について注意が必要です。
読み込む順番は、jQuery→popper.js→bootstrap.jsとなります。
jQueryより先にbootstrap.jsを読み込んだりするとうまく表示されない可能性があります。
スクリプトを読み込む順番
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>次に、以下のコードを追記します。
コンフリクトを防ぐ記述
<script>
$.widget.bridge('uitooltip', $.ui.tooltip);
</script>これを追記すると、コンフリクトを防ぐことができます。
jQueryとBootstrapが競合してしまうことはtooltip以外にもありますが、似たような方法で解決することができます。
まとめ
いかがでしたか？tooltipが表示されない時はこの記事の解決方法を是非試してみてください！
