如何在 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>

更新： 这是 StackBlitz 示例

更新 2：顺便说一句，请不要忘记将引用（import {MatTooltipModule} from '@angular/material/tooltip';）添加到 app.module.ts 文件和提供程序:)

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>

这里还有一个 StackBlitz 分支的链接，你可以在其中看到它的工作原理。