如何在 mat-label 上显示 matTooltip 并在 mat-form-field 中使用超棒的字体图标

Question

我尝试了很多关于工具提示和 Angular 表单的知识，但没有用任何帮助将不胜感激谢谢。如有不妥请指正

下面是我试过的代码。我想显示一个带有工具提示的图标来解释 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：顺便说一句，请不要忘记将参考（import {MatTooltipModule} from '@angular/material/tooltip';）添加到 app.module.ts 文件和提供者 :)

Answer 1

问题是表单标签禁用了内容上的指针事件。检查用于标签的 class .mat-form-field-label-wrapper。如果您单击 link 并查看代码，他们似乎会删除此代码，他们有评论说应该允许鼠标事件。

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

例如你这样定义一个class。

.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 你可以看到它的工作原理。

如何在 mat-label 上显示 matTooltip 并在 mat-form-field 中使用超棒的字体图标

How to display matTooltip on mat-label with a font awesome icon in mat-form-field

font-awesome

angular-material

angular