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

user_10823922 0
Viewed 1955

I tried a lot with the knowledge I have on tooltips and Angular forms but no use any help will be much appreciated thank you. Please correct me if am doing anything wrong.

Below is my code that I tried. I want to display an icon with a tooltip to explain about the selection at the end of 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>

Update: Here is the StackBlitz example

Update 2 : BTW Please don't forget to add reference(import {MatTooltipModule} from '@angular/material/tooltip';) to the app.module.ts file and to the provider :)

font-awesome angular-material angular
1 Answers

The issue is that the form label disables pointer events on the content. Check the class .mat-form-field-label-wrapper that is used for the label. It looks like they will remove this if you click in the link and look at the code they have a comment that mouse events should be allowed.

You can easily work around this by setting a class that enables pointer events on the icon.

For example you define a class like this.

.pe {
    pointer-events: auto;
}

Then just add it to the icon definition.

<mat-label>Tooltip position <i class="fas fa-info-circle pe" matTooltip="This is simple Tooltip"></i>

Here is also a link to a fork of your StackBlitz where you can see it work.

user_62004140
Related