I have encountered an issue with the matTooltip in my Angular project. When I press a button that has a tooltip attached and redirects me to another page, the tooltip remains visible in the same position even after redirecting. I know that changing the "trigger" value from "focus" to "hover" should solve this problem, but all the solutions I found online are using jQuery. Is there a way to achieve this in TypeScript/Angular?
Regarding the button code:
<button type="button"
#tooltip="matTooltip"
class="close pull-right cogs-properties"
matTooltip="Edit button"
(mouseenter)="tooltip.hide()"
(click)="onEditPage(page)"
aria-label="Edit">
<span class="fa fa-cog" aria-hidden="true"></span>
</button>
This is the editPage function:
onEditPage(page) {
this.selectedPageForEditing = page;
this.editPageService.sendPage({
pageName: page["name"],
templateId: page["value"]["templateId"]
});
this.router.navigate([".../page"]);
}