Angular-Material：在表单标签上显示工具提示

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>

请参阅此堆栈闪电战示例

Answer 1

我使用 CSS 通过以下代码来做到这一点：

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

Answer 2

我会用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 。