How to use Angular-Material Tooltips toggle method correctly?

Question

I would like to click on the span element once, so that the tooltip appears and then again to hide.

Here is my html. What am I doing wrong?

<span mdTooltip="Tooltip!" (click)="tooltip.toggle()>Test</span>

score 9 · Accepted Answer · edited Apr 07 '19 at 19:29

9

Template reference variable should help you to accomplish that:

<span matTooltip="Tooltip!" #tooltip="matTooltip" (click)="tooltip.toggle()">Test</span>

See also

edited Apr 07 '19 at 19:29

TheRennen

answered Oct 05 '17 at 14:16

yurzui

Thank very much! You solved my problem. I was always wondering what '#' sign meant. – Paul Pinter Oct 05 '17 at 14:20
3

Althogh the solution is working but it looks to me it does noting with the hover effect which also show and hide the tooltip when the mouse move. How can you only manage the tooltip by click event and kind of switch off the react for hover effect? – Gabor Dec 07 '20 at 21:26
For auto hiding the tooltip you can add this event along with click event. Hope this will help. Do : (mouseleave)="tooltip.hide(300)" – Rahul Dudhane Nov 18 '21 at 15:26

1 Answers1