[bootstrap4]Tooltip(ツールチップ)を使ってみる

bootstrapbootstrap4

bootstrap4でTooltipを使う方法です!
公式を見ると詳細などもわかりますが、ここでは要点だけまとめてます。

Bootstrap4のTooltip(ツールチップ)って?

マウスカーソルを乗せると、うねっと飛び出してくる補足の説明文が書いてあるやつです。
デモはこちら!

サンプル

うねっと出てくるやつの位置を決めるためにPopper.jsに依存しているらしいので
ツールチップを機能させるには、popper.jsも読み込む必要があるようです。

<html>
    <head>
        <title>bootstrap4 | tooltip test</title>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
        <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
        <script>
        $(function () {
          $('[data-toggle="tooltip"]').tooltip();                                                                                                                                                                                             
        })
        </script>
    </head>
    <body>
      <nav class="navbar navbar-dark bg-dark">
        <div class="navbar-brand">bootstrap4 ツールチップテスト</div>
      </nav>
      <div class="container mt-4">
        <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
          ツールチップが上に!
        </button>
        <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
          ツールチップが右に!
        </button>
        <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
          ツールチップが下に!
        </button>
        <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
          ツールチップが左に!
        </button>
      </div>
     </body>
</html>

解説

ヘッダーで必要なcss,js読み込み

公式にあるbootstrap.min.cssとjquery3, popper.js, bootstrap.min.jsを読み込んでます。
デモではcdnを使っていますが、ネットにつながらない環境などの場合は
ダウンロードしたファイルを配置して読み込んでおきましょう。

scriptでtooltip対象を設定

data-toggle=”tooltip”の属性と値を持っているタグを
jqueryでセレクトして、tooltip関数を読んであげると動いてくれます。

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

オプション

Tooltipで改行したい

改行できないの?っと思いましたが、オプションありました!
htmlにtrueで渡してあげると、ツールチップ内に
を書けば改行されるようになります。

$('[data-toggle="tooltip"]').tooltip({ html:true });

デモの方では一番最初のツールチップのみ改行するようにしてます😆
他にもオプションがあるので公式の方を確認してください。

コメント

タイトルとURLをコピーしました