bootstrap4でTooltip(ツールチップ)を使ってみる！
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 });
デモの方では一番最初のツールチップのみ改行するようにしてます😆
他にもオプションがあるので公式の方を確認してください。
コメント