通过事件而不是悬停切换mdTooltip

Question

我在图标上使用mdTooltip - 将鼠标悬停在图标上会显示工具提示。

如何在没有用户悬停的情况下显示工具提示（例如，当发生事件时）

查看documentation for MD tooltip，似乎可以使用toggle方法进行此操作。

我是Angular和Material Design的新手。什么是语法，我该如何实现？

以下是我的模板：

<md-icon mdTooltip="{{errorMessage}}" (mdTooltipToggle)="myVar">warning</md-icon>

我知道这完全是关闭的，但我猜我需要一个可以触发的事件，这会触发toggle() - 但是如何？

修改

好的，我明白我可以选择mdTooltip“的东西”（无论是什么叫做元素，指令或“属性指令”等等？）使用@ViewChild它会选择工具提示的第一个实例，但是如果我有mdTooltip的多个图标怎么办？

例如，如果我有：

<md-icon iconOne *ngIf="isGood"  mdTooltip="{{message}}">check</md-icon>
<md-icon iconTwo *ngIf="!isGood" mdTooltip="{{errorMessage}}">warning</md-icon>

如何在第二个图标上切换仅工具提示？

我发布了另一个问题，因为它与此略有偏差： Select specific attribute directive using ViewChild in Angular

Answer 1

这是一个Plunker，向您展示如何实现这一目标： https://plnkr.co/edit/AdY0WU8fMeROE4lxKYSM?p=preview

@ViewChild(MdTooltip) tooltip;

此@ViewChild在模板中查找MdTooltip指令并将其保存在tooltip属性下。

ngAfterViewInit() {
    this.tooltip.show(0);
}

然后，您可以在AfterViewInit阶段访问它，并在其上调用show，hide或toggle方法。

请注意，上面的Plunkr仅在您的模板中只有一个工具提示时才会起作用（因为@ViewChild（MdTooltip），因为它抓取了它找到的第一个MdTooltip指令）。如果您需要使用多个工具提示，则需要使用＃符号来获取所需的工具提示。

编辑：

我注意到我的Plunkr没有回答你的问题。 您希望在触发服务器错误时切换工具提示。

我写了另一个版本的Plunkr：https://plnkr.co/edit/s3Ykz0B8D7r1U6paLWmF?p=preview

在此版本中，我不会立即触发工具提示的显示。我模拟了一个Observable，它将在3秒后“发生错误”。这将更改您的图标并切换工具提示显示。

我在ngOnInit函数的注释中解释过。