Estoy usando Bootstrap v5.x para mi aplicación.

En JavaScript, tengo, de acuerdo con la documentación, información sobre herramientas habilitada en todas partes:

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

También estoy generando contenido dinámico, esta es una aplicación Blazor, así que también agregué esto a mi JavaScript:

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

Todo esto funciona muy bien para lo que estoy haciendo, excepto por un caso extremo; y ahí es cuando hago clic en un elemento con información sobre herramientas que navega desde la página actual. Cuando hago esto, la información sobre herramientas permanece en la pantalla hasta que realizo 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 ... } }

Si hago esto varias veces, me quedo con información sobre herramientas múltiples en toda mi página.

¿Cómo puedo ocultar la información sobre herramientas cuando navego fuera?