My one-page website utilizes Bootstrap 5 with Spring Boot and Thymeleaf. I am encountering an issue where the initialization of tooltips in Bootstrap is happening before the script has fully loaded, causing errors and disrupting the page loading process.
<head>
... // css and meta omitted for brevity
<script th:src="@{/js/bootstrap.bundle.min.js}" async="true"></script>
</head>
<body>
... // page content
<script>
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
})
</script>
</body>I have attempted different placements and attributes for the Bootstrap script:
- In the head section
- With async attribute
- With defer attribute
- A combination of both attributes
- In the body section right before the tooltip initialization script
However, none of these methods prevent the second script from firing before the first script finishes loading.
I have referred to the HTML spec here, but I am unsure if the script loading issue is the root cause.
If anyone has a solution to definitively avoid this error, I would greatly appreciate it.