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>