I am using Bootstrap v5.x for my application.

In the JavaScript, I have, according to the documentation, enabled tooltips everywhere:

var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
    return new bootstrap.Tooltip(tooltipTriggerEl)
})

I am also generating dynamic content, this is a Blazor application, so I have added this to my JavaScript as well:

$('body').tooltip({
    selector: '[data-toggle="tooltip"]'
});

This all works very well for what I am doing, except for one edge case; and that is when I click an element with a tooltip that navigates from the current page. When I do this, the tooltip remains on screen until I perform a Ctrl + F5.

<div @onclick="() => myMethod(id)">
    <span data-toggle="tooltip" data-bs-placement="bottom" title="Go To Next Page">
        <img src="./images/myicon.png" width="16" height="16" alt="My Awesome Image" />
    </span>
</div>


@code {
    myMethod(int id){
        // navigate to next page ...
    }
}

If I do this multiple times, I am left with multiple tooltips all over my page.

How can I hide the tooltip when I navigate away?