1. JavaScriptを使用して機能させる
https://cccabinet.jpn.org/bootstrap4/getting-started/introduction
上記サイトどおりに、
以下の script をページの終わり近くにある body タグの直前に置いて有効にする。
<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.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
2. HTML
<li class="nav-item">
<a class="nav-link" href="#">
<i class="fas fa-sign-out-alt fa-lg fa-fw aria-hidden="true" data-toggle="tooltip" data-placement="bottom" title="ログアウト"></i>
</a>
</li>
3. JavaScript 実行コード
加えて、1.の3行の下にまずは直接書いてみた。
<script>
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
</script>
4. CSS
.tooltip .tooltip-inner {
color:red;
background-color: #fff;
border: solid 1px #000;
}
.tooltip-auto[x-placement^=bottom] .arrow::before,
.tooltip .arrow::before {
bottom: 0;
border-width: 0 !important;
border-bottom-color: #fff !important;
}