CODEWITHSUNDEEP
angulartypescript
Cristian Coroian
Cristian Coroian

Reputation: 109

Angular Material's matTooltip not disappearing after redirecting to another page

As title says, the matTooltip doesn't disappear if, let's say, I press a button which has a tooltip attached and redirects me to another page. The tooltip is displayed and it redirects me to the other page, but the tooltip remains visible in the same position. I know that I need to change the "trigger" value from "focus" to "hover", but the solutions I found are all using jQuery. Is there a way I can do this in TypeScript/Angular?

Edit:

This is how my button looks like: 

  <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"]);
  }

Upvotes: 3

Views: 3771

Answers (1)

Cristian Coroian
Cristian Coroian

Reputation: 109

So after some deep searches I found that when you're using RouteReuseStrategy with a tooltip (and that's exactly what I'm using), the tooltip doesn't vanish after navigating to another page. For the moment there isn't a fix for this using Typescript/Angular features but only using jQuery. The below links addresses the exactly same problem and offers a solution: https://github.com/angular/material2/issues/11478#issuecomment-420164916

Upvotes: 6

Related Questions