Why do my bootstrap tooltips get stuck when I reload html content with ajax?

Question

On my site I use Bootstrap v5.3 I have a main page (index.php) and a PHP file which I use to request information from the database (load.php).

I use a jquery function to load content via load.php to my main page every 30 seconds and display it there.

I also have a navbar with a reload button on my main page. This reload button has a tooltip.

When I click the reload button, load.php is called again.

The content that is reloaded via load.php also contains tooltips.

When I click the reload button, the content is loaded and displayed correctly (the tooltips also work). But the tooltip of the reload button gets stuck.

What could be the reason for this?

I tried to add the Enable Tooltips JavaScript from the Bootstrap documentation to load.php as well.

const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))

Answer 1

I have just solved the problem by initializing the static tooltips of the navbar in the index.php file with another const variable.

I load the static tooltips with this script:

const staticTooltips = document.querySelectorAll('.static-tt')
staticTooltips.forEach(t => {
  new bootstrap.Tooltip(t)
})

And I load the tooltips that are loaded via the jquery function with this script:

const dynamicTooltips = document.querySelectorAll('.dynamic-tt')
dynamicTooltips.forEach(t => {
  new bootstrap.Tooltip(t)
})

Now the tooltip of the reload button no longer gets stuck when content is reloaded via load.php