angularangular-material

Angular-Material: display a tooltip on a form label


I would like to display a tooltip on a label. Unfortunately this does not work. Is there a simple solution ?

  <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>

See this Stack-Blitz Example


Solution

  • I would use the mat-icon after your input element, as suggested in the Angular Material documentation here. It also does look a bit nicer I think, when the icon is right aligned.

    <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>

    I made a Stackblitz here.