title: Angular Material's matTooltip not disappearing after redirecting to another page
body: <p>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?</p>
  
  <p>Edit: </p>
  
  <p>This is how my button looks like: </p>
  
  <pre><code>  &lt;button type="button"
            #tooltip="matTooltip"
            class="close pull-right cogs-properties"
            matTooltip="Edit button"
            (mouseenter)="tooltip.hide()"
            (click)="onEditPage(page)"
            aria-label="Edit"&gt;
      &lt;span class="fa fa-cog" aria-hidden="true"&gt;&lt;/span&gt;
    &lt;/button&gt;
  </code></pre>
  
  <p>This is the editPage function:</p>
  
  <pre><code>  onEditPage(page) {
      this.selectedPageForEditing = page;
      this.editPageService.sendPage({
        pageName: page["name"],
        templateId: page["value"]["templateId"]
      });
      this.router.navigate([".../page"]);
    }
  </code></pre>