I am facing an issue on my webpage related to including Bootstrap JS using npm. When I include it like this:
<script src="node_modules/jquery/dist/jquery.slim.min.js"></script>
<script src="node_modules/popper.js/dist/umd/popper.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
the tooltip feature doesn't work properly. However, if I include Bootstrap JS like this:
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ef8d80809b9c9b9d8e9fafdbc1dac1dc">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"gt;</script>
it works perfectly fine.
This is where the tooltip element is used:
<a href="#reserve-table" role="button"
data-toggle="tooltip" data-html="true" title="Or Call us at <br><strong>+852 12345678</strong>"
class="btn btn-block btn-warning nav-link">
Reserve Table
</a>
As a beginner in Bootstrap, I'm unsure why this happens and what is the best practice for including Bootstrap for optimal site loading speed. Any insights or recommendations are appreciated!
Update: I found a similar issue discussed here. The solution suggested was to use external resources for Bootstrap inclusion, which resolves the tooltip problem, but no explanation was provided.
Update: After replacing the file:
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
with:
<script src="node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
the issue got resolved, although the reason behind this change remains unknown to me.