Show mdTooltip until clicked, hide when clicked again

Question

I am trying to disable the mouseover effect and run mdTooltip on click and disable it on click again. Can this be done? I thought the .toogle () method would be the right tool for this, unfortunately, it works the other way around.

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

Run codeHide result

Answer 1

You should try using event.stopImmediatePropagation();

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

Plunger example