Found A Reason That Can Cause Tool Tips To Not Show

I have several pages that have a small button menu in the upper-right header area. The buttons are shown or hidden by the View “hide on” screen viewport selector for different devices.

When the page menu is on small to medium devices the buttons are set to a small fixed width icon button. It is these buttons that I could not figure out why one page shows the Tool Tip perfectly, while another similar page did not show the Tool Tip.

The head has the necessary links to the BS4 tool tips.

   <script src="../dmxAppConnect/dmxBootstrap4Tooltips/dmxBootstrap4Tooltips.js" defer=""></script>

And below is the code that’s being used.

   <!-- small view churches -->
   <button class="btn btn-church-1 btn-sm shadow d-lg-none" dmx-on:click="browser1.goto('../05_church/church_list_all.php')" dmx-bs-tooltip="'View Churches'">
   <i class="fas fa-church fa-fw"></I>
   </button>

   <!-- large view churches -->
   <button class="btn btn-church-1 btn-sm shadow d-none d-lg-inline-block" dmx-on:click="browser1.goto('../05_church/church_list_all.php')" dmx-bs-tooltip="'View Churches'">
   <i class="fas fa-church">&nbsp;</i>View All Churches
   </button>

Then I finally found the error. It was with the order of the following links:

	<script src="../bootstrap/4/js/popper.min.js"></script>
	<script src="../bootstrap/4/js/bootstrap.min.js"></script>

I found that when the popper.min.js is beneath the bootstrap.min.js the Tool Tip would not appear when the mouse hovered the button.

After I placed the link to pooper.min.js above the bootstrap.min.js, the Tool Tip work as it should.