Angular-Material: display a tooltip on a form label

user_1626985 0
Viewed 3186

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

angular-material angular
2 Answers

I use CSS to do this with following code :

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

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.

user_46060400
Related