I've been working on building an HTML website using Bootstrap 5.2, and I followed the instructions in the Bootstrap documentation to add tooltips. However, I encountered an issue where the tooltips were not functioning as expected.
When checking the Mozilla console, I received the following error:
Uncaught ReferenceError: bootstrap is not defined tooltipList
The JavaScript code for Bootstrap tooltip that I used is:
<script>
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
})
</script>
Here is how I called it in my HTML document:
<link rel="stylesheet" href="/bootstrap-5.3.0/css/bootstrap.min.css?v=5.3.0">
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">Tooltip on top</button>
<script type="text/javascript" src="/js/jquery.min.js" defer=""></script>
<script type="text/javascript" src="/bootstrap-5.3.0/js/bootstrap.bundle.min.js" defer=""></script>
<script>
const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
</script>I have tried using both Bootstrap 5.2 and 5.3 versions, but unfortunately, the tooltips are still not functioning properly. Strangely, the popovers seem to be working fine.