2

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>
Mickonis
  • 25
  • 1
  • 3
  • See this link i think this will help [https://stackblitz.com/angular/qkjgkgjnaxbv?file=app%2Ftooltip-delay-example.ts] – Imrul Islam Mar 21 '19 at 09:05

2 Answers2

1

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);
}
noamyg
  • 2,747
  • 1
  • 23
  • 44
-1

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.

ouflak
  • 2,458
  • 10
  • 44
  • 49
yksolanki9
  • 429
  • 2
  • 7
  • 14
  • The documentation is very clear about this: "The default delay in ms before hiding the tooltip *** after *** hide is called" This is not what the OP asked for. – Battlefury Apr 14 '22 at 06:13