Show mdTooltip until clicked, hide when clicked again

Question

I'm trying to disable the mouse-hover effect and trigger mdTooltip on click and disable it on clicking again. Is it possible to do that? I thought the .toogle() method would be the right tool for that unfortunately it works the opposite way.

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

Answer 1

IMO, A better solution is using matTooltipDisabled

set it as false right before you call show and set it as true when you call hide

So you don't trigger extra change detection because of listening mouse events. (In this case, we can save 2, mouseenter and mouseleave )

Answer 2

You should try using event.stopImmediatePropagation();

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

Plunker Example