Bootstrap v5.x tooltip remains on page after navigating away from its page

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?