显示 mdTooltip 直到单击，再次单击时隐藏

Posted 2023-03-13

【中文标题】显示 mdTooltip 直到单击，再次单击时隐藏

【英文标题】：Show mdTooltip until clicked, hide when clicked again

【发布时间】：2018-03-18 01:15:09

【问题描述】：

我正在尝试禁用鼠标悬停效果并在单击时触发 mdTooltip 并在再次单击时禁用它。有可能这样做吗？我认为 .toogle() 方法将是正确的工具，不幸的是它的工作方式相反。

<div style="text-align: center;">
   <span matTooltip="Tooltip!" #tooltip="matTooltip" (click)="tooltip.toggle()">Test</span> 
</div>

【问题讨论】：

我听说 link 添加了这个功能，但是我不明白如何使它工作。

material2 工具提示使用以下语法：我有一个工具提示

这项工作是一次完成还是从没有？

【参考方案1】：

你应该尝试使用event.stopImmediatePropagation();

<span matTooltip="Tooltip!" 
  (mouseenter)="$event.stopImmediatePropagation()" 
  (mouseleave)="$event.stopImmediatePropagation()"
  #tooltip="matTooltip" (click)="tooltip.toggle()">Test</span> 

Plunker Example

【讨论】：

很好的解决方案，可惜材料团队没有给我们一个点击显示选项

我想我只是想出了一个更好的解决方案

【参考方案2】：

IMO，更好的解决方案是使用matTooltipDisabled

在调用 show 之前将其设置为 false，在调用 hide 时将其设置为 true

因此您不会因为监听鼠标事件而触发额外的更改检测。 （在这种情况下，我们可以保存2，mouseenter和mouseleave）