I have a simple one page website with bootstrap 5 set up using spring boot with thymeleaf.
On this page I want e.g. to use the bootstrap tooltip. The problem is that the function to initialize the tooltip fires before the bootstrap script has finished loading so there will be an error and the page will not load correctly.
<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 tried to place the bootstrap script
but nothing prevents the second script to fire before the first script has finished loading.
I have read the HTML spec here but in the end I'm not sure if the loading of the script is truly the problem.
Has someone an idea to definitly prevent this error?
Finally solved this problem.
I put all the javascript code in a seperate js-file. Then I load this file after the bootstrap file at the end of the body and everything works fine.
<head>
... //css and meta
</head>
<body>
... // page content
<script th:src="@{/js/bootstrap.bundle.min.js}"></script>
<script th:src="@{/js/myfunction.js}"></script>
</body>