CODEWITHSUNDEEP
angular-materialtooltip
Mickonis
Mickonis

Reputation: 25

How to hide a matTooltip after set time interval?

I have looked at Angular official material design tooltip page, however, cannot seem to find anywhere how to hide a matTooltip after set time interval if a user stays on the object for a long period of time? Is there a separate in-built property for that? Or I'll need some kind of workaround?

It is imported into my TS file as described in the documentation and it works as it supposed to, thus I'm not adding that part of the code here.

My HTML is as follows:

     <a matTooltip="Info about the action" matTooltipPosition="right">
       <i class="fal-settings"></i> Settings
     </a>

Upvotes: 2

Views: 4100

Answers (2)

yksolanki9
yksolanki9

Reputation: 519

Use matTooltipHideDelay to add a delay before the tooltip is hidden. For your case:

<a matTooltip="Info about the action"
 matTooltipPosition="right"
 [matTooltipHideDelay]="3000">

   <i class="fal-settings"></i> Settings

</a>

This will hide the tooltip after 3 seconds.

Upvotes: -2

noamyg
noamyg

Reputation: 3094

Template:

 <a #actionInfoTooltip="matTooltip" matTooltip="Info about the action" matTooltipPosition="right" (mouseenter)="hideTooltipIn(actionInfoTooltip, 3000)">
   <i class="fal-settings"></i> Settings
 </a>

Component:

import { MatTooltip } from '@angular/material';
...

hideTooltipIn(tooltip : MatTooltip, ms : number){
  setTimeout(() => tooltip.hide(), ms);
}

Upvotes: 1

Related Questions