Bootstrap tooltips remain visible after navigation in Blazor app

I'm new to Blazor and client side web development in general. I have the following block of code in my Blazor app:

<h1 class="page-title">
    All Offices 
    <a href="@("office-edit")" class="btn btn-primary table-btn" 
        data-toggle="tooltip" 
        data-placement="top" 
        title="Add new office">
        <i class="fas fa-plus"></i>
    </a>
</h1>

The tooltip works fine when I hover my mouse over it and move away. However when I click through the link, the tooltip remains visible. How should I ensure that it disappears?

This is not blazer issue. It is out of box feature in bootstrap. See bootstrap example section here, you will see similar behaviour.

You can change this behaviour by writing your own javascript code. this link will help you to write own javascript.