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

Question

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

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

Answer 1

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

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

Plunker示例

Answer 2

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

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

因此，您不会因为监听鼠标事件而触发额外的更改检测。（本例中，我们可以保存2个， mouseenter 和 mouseleave ）