Show mdTooltip until clicked, hide when clicked again

Issue

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>

Solution

You should try using event.stopImmediatePropagation();

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

Plunker Example

Answered By - yurzui