点击显示mdTooltip，再次点击隐藏

Question

我想禁用鼠标悬停效果，并在单击时触发mdTooltip，在再次单击时禁用它。这是否可能？我认为.toogle()方法是正确的工具，但不幸的是它起到了相反的作用。

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

- Paul Pinter

---

我听说这个特性已经被添加了链接，但是我不知道如何让它工作。 - Paul Pinter

material2 工具提示使用此语法：<span matTooltip="提示！">我有一个工具提示</span> - Vega

这个曾经工作过还是从未工作过？ - Vega

Answer 1

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

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

Plunker示例

- yurzui

---

很好的解决方案，可惜材料团队没有给我们提供一个“点击展示”的选项。 - inorganik

我想我刚刚想出了一个更好的解决方案。 - maxisam

Answer 2

我认为更好的解决方案是使用matTooltipDisabled

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

这样你就不会因为监听鼠标事件而触发额外的变化检测。(在这种情况下，我们可以节省2个事件，即mouseenter和mouseleave)

- maxisam