Настраиваемая подсказка Angular2 при нажатии на значок

Question

Я хочу показывать всплывающую подсказку, когда щелкаю по значку, а не при наведении на него курсора.

<a title="Tooltip">
    <i class="fa fa-info-circle"></i>
</a>

Я также хочу иметь возможность настроить подсказку с некоторыми классами, такими как:

<div class="a-tooltip a-tooltip--top-right">
  This is my tooltip text!
</div>

Моя попытка:

<a (click)="tooltip.toggle()"
   #tooltip="matTooltip"
   matTooltip="test"
   aria-label="Button that displays a tooltip when focused or hovered over">
   <i class="fa fa-info-circle"></i>
</a>

Это, однако, не показывает всплывающую подсказку при нажатии. В app.module.ts у меня есть:

import { MatTooltipModule } from '@angular/material';

@NgModule({
    declarations: [
        ...
    ],
    imports: [
        MatTooltipModule 
    ]
})

Answer 1

По умолчанию mat-tooltip предназначен для наведения мыши. Если вы хотите отключить это, используйте следующий код:

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