Bootstrapでのツールチップ使用方法

BootstrapのTooltipsを使用したいのですが、使用方法がわかりません。教えてください。
なお、jQueryは読み込んであります。

行動規範の内容に同意します

回答1件

ベストアンサー

ツールチップを表示させたい要素のdata-toggle属性にtooltipを指定し、title属性にツールチップとして表示したい文字列の設定を行って、javascriptで初期化を行うことでホバー時のツールチップの表示が行えます。また、data-placement属性でツールチップの表示位置を変更でき、data-html属性にtrueを指定することでツールチップの内容にHTML, CSSで装飾を行うことができます。
以下のコードの4番目のbutton要素でdata-html属性を有効にすることでHTML, CSSによる装飾が可能なことを確認できます。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
6    <title>タイトル</title>
7    <style type="text/css">
8        body {
9            padding: 100px;
10        }
11
12        .text4 {
13            color: #ff8ed0;
14        }
15    </style>
16</head>
17<body>
18<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="テキスト1">
19    data-placement属性にtopを指定したので、ツールチップが上に表示される。
20</button>
21<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="テキスト2">
22    data-placement属性にtopを指定したので、ツールチップが右に表示される。
23</button>
24<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="テキスト3">
25    data-placement属性にtopを指定したので、ツールチップが下に表示される。
26</button>
27<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" data-html="true"
28        title="<div class='text4'>テキスト4</div>">
29    data-placement属性にtopを指定したので、ツールチップが左に表示される。
30</button>
31<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
32<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
33<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
34<script>
35    $(function () {
36        $("[data-toggle=\"tooltip\"]").tooltip();
37    });
38</script>
39</body>
40</html>