如何在设置时间间隔后隐藏 matTooltip？

Question

我查看了 Angular 官方材料设计工具提示页面，但是，如果用户长时间停留在对象上，似乎找不到任何地方如何在设置的时间间隔后隐藏 matTooltip？是否有单独的内置属性？或者我需要某种解决方法？

它已按照文档中的说明导入到我的 TS 文件中，并且可以正常工作，因此我不会在此处添加该部分代码。

我的 HTML 如下：

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

Answer 1

模板：

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

组件：

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

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

Answer 2

使用matTooltipHideDelay 在工具提示隐藏之前添加延迟。对于您的情况：

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

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

</a>

这将在 3 秒后隐藏工具提示。