Tooltip doesn't disappear

Ionic Framework Ionic Angular
1

Hi,

I’m trying to use the Angular Material Tooltip ( https://v9.material.angular.io/components/tooltip/overview ) on an Ionic 5 app.

The problem is that when I use it on a button leading to a second page, the tooltip doesn’t disappear.

<ion-button 
        matTooltip="Tooltip text" 
        [routerLink]="['/about']">About
</ion-button>

Does some one know how to solve this issue ?
Thanks,

Ionic CLI : 6.10.1
Ionic Framework : @ionic/angular 5.2.2
@angular-devkit/build-angular : 0.901.9
@angular-devkit/schematics : 9.1.9
@angular/cli : 9.1.9
@ionic/angular-toolkit : 2.2.0

2

Probably a race condition between the page being animated away. What you could is just add a click handler on the button to hide the tooltip when the button is clicked.

3

Thanks for your answer,

I tried this without success :

<ion-button
            #tooltip="matTooltip"
            matTooltip="Tooltip text"
            (click)="tooltip.hide()"
            [routerLink]="['/about']">About
</ion-button>
4

The mousedown event did the trick:

<ion-button
            #tooltip="matTooltip"
            matTooltip="Tooltip text"
            (mousedown)="tooltip.hide()"
            [routerLink]="['/about']">About
</ion-button>

It would be nice to have an ion-tooltip in the future. :wink:

3 Likes