如何在mat-label上显示matTooltip，在mat-form-field中有一个很棒的字体图标

Question

我尝试了很多关于工具提示和角度形式的知识，但没有任何用处，任何帮助都会非常感谢，谢谢。如果我做错了什么，请纠正我。

下面是我尝试过的代码。我想在mat-label的末尾显示一个带有工具提示的图标来解释选择。

<div class="col-12 col-md-6 pt-3 order-5">
    <mat-form-field name="employeeForm" [formControl]="selectFormControl">
        <mat-label>Tooltip position <i class="fas fa-info-circle" 
        matTooltip="This is simple Tooltip"></i>
        </mat-label>
        <mat-select name="country" ngDefaultControl formControlName="employee">
            <mat-option *ngFor="let employee of employees " [value]="employee">
                {{employee.name}}
            </mat-option>
        </mat-select>
    </mat-form-field>
</div>

更新：Here is the StackBlitz example

更新2: BTW请不要忘记向app.module.ts文件和提供程序添加引用(import {MatTooltipModule} from '@angular/material/tooltip';) :)

Answer 1

问题是表单标签禁用了内容上的指针事件。检查用于标签的类.mat-form-field-label-wrapper。如果你点击链接并查看代码，看起来他们会删除这个链接，他们会有一个注释，说明应该允许鼠标事件。

您可以通过设置一个在图标上启用指针事件的类来轻松解决此问题。

例如，您可以像这样定义一个类。

.pe {
    pointer-events: auto;
}

然后只需将其添加到图标定义中。

<mat-label>Tooltip position <i class="fas fa-info-circle pe" matTooltip="This is simple Tooltip"></i>

这里还有一个link to a fork of your StackBlitz，你可以在这里看到它的工作原理。