Show mdTooltip until clicked, hide when clicked again

user_4307759 0
Viewed 7555

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>

angular-material angular typescript html javascript
2 Answers

You should try using event.stopImmediatePropagation();

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

Plunker Example

user_54851670

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 )

user_6677670
Related