Bootstrap tooltip doesn't go away with a back button click and AJAX calls

Question

I am having an issue where the bootstrap 4 tooltips doesn't go away with the browser's back button click:

I am using rails, and I do have this code:

document.addEventListener('turbolinks:load', () => {
    $('[data-toggle="tooltip"]').tooltip({
        trigger: 'hover'
    })

    $('[data-toggle="popover"]').popover()
})

The trigger: hover is working, and I got the suggestion from Bootstrap's tooltip doesn't disappear after button click & mouseleave

But they survive a back button click.

Edit, similar thing is happening with AJAX calls:

Solved:

This code hides the tooltip whenever the element is clicked, this solves the issue.

    $('[data-toggle="tooltip"]').tooltip({
        trigger: 'hover'
    }).on('click', function() {
        $(this).tooltip('hide')
    })

Answer 1

On Bootstrap 5, you need the following selector:

$('[data-bs-toggle="tooltip"]').tooltip({
  trigger: 'hover'
}).on('click', function() {
  $(this).tooltip('hide')
})