■ Bootstrap 4 で ツールチップやポップオーバーが表示されない
* Bootstrap 4 の機能を使って、ツールチップやポップオーバー(Popovers)表示しようとしたけど 以下の公式サイトのような表示にならない。ToolTip
https://getbootstrap.com/docs/4.1/components/tooltips/
Popovers
https://getbootstrap.com/docs/4.1/components/popovers/
エラー内容
ブラウザで f12 のログ表示よりBootstrap dropdown require Popper.js (https://popper.js.org)
原因
* JavaScriptのインポートにおいて、Bootstrapの JavaScriptを、Popper.jsの前に定義していたため。 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" ・・・></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" ・・・></script><!-- ★ここ★ --> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" ・・・></script>http://cccabinet.jpn.org/bootstrap4/getting-started/introduction
より抜粋 ～～～～～～～～～～～～～～～ jQuery、Popper.js、独自のJavaScriptプラグインが必要。 以下の <script> をページの終わり近くにある </body> タグの直前に置いて有効にする。 最初にjQueryが来て、Popper.js、それからJavaScriptのプラグインが来なければならない。 ～～～～～～～～～～～～～～～http://cccabinet.jpn.org/bootstrap4/components/popovers
より抜粋 ～～～～～～ ポップオーバーは、サードパーティのライブラリであるPopper.jsを使用して位置情報を取得しているため、 ポップオーバーが動作するためには bootstrap.js の前にpopper.min.jsを組み込むか、 代わりにPopper.jsを内部に含む bootstrap.bundle.js や bootstrap.bundle.min.js を使用する必要がある。 ～～～～～～
解決策
* jQuery => Popper.js => bootstrap.js の順番で定義するhttps://getbootstrap.com/docs/4.1/getting-started/introduction/
より抜粋 ～～～～～～ <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" ・・・></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" ・・・></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" ・・・></script> ～～～～～～
参考文献
以下のサイトで助かりました。感謝http://nodding-off-programmer.blogspot.com/2017/10/bootstrap-dropdown-require-popperjs.html
