角材料：在表单标签上显示工具提示

Question

我想在标签上显示工具提示。不幸的是，这不起作用。有一个简单的解决方案吗？

  <mat-form-field >
    <mat-label matTooltip="Please enter your E-Mail Address">
      E-Mail <mat-icon>help_outline</mat-icon>
    </mat-label>
    <input
      matInput
      placeholder="Enter your email"
      [formControl]="email"
     >
    <mat-error *ngIf="email.invalid">{{getErrorMessage()}}</mat-error>
  </mat-form-field>

查看此Stack-Blitz Example

Answer 1

我会在Angular Material文档here中建议在mat-icon元素之后使用input。我认为，当图标正确对齐时，它的确看起来要好一些。

<mat-form-field >
  <mat-label>E-Mail</mat-label>
  <input matInput
         placeholder="Enter your email"
         [formControl]="email">
  <mat-icon matSuffix 
            matTooltip="Please enter your E-Mail Address">
    help_outline
  </mat-icon>
  <mat-error *ngIf="email.invalid">{{getErrorMessage()}}</mat-error>
</mat-form-field>

我做了一个Stackblitz here。

Answer 2

我使用CSS通过以下代码完成此操作：

.mat-form-field-label mat-label {
   pointer-events: auto;
}