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>

单击Angular2自定义工具提示

1 个答案: