Bootstrap4のtooltipを出す方法

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; 
}

5. 仕上がり