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

Question

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

Could you please add minimal reproducible example, f.e. a [StackBlitz](https://stackblitz.com/), so it's easier to provide a solution for your question. — Roy, Apr 22 '21 at 06:52
Hi @Roy I have updated the post with the stackblitz thank you again for your help — Mystic Groot, Apr 22 '21 at 08:19
You cant use icon in a `mat-label` according to [this](https://stackoverflow.com/a/54650693/10084605). If you want to use icon, use it with directives `matSuffix` or `matPrefix` or dont use material form field. — tufonas, Apr 22 '21 at 09:18
Quite hacky (hence why I'm not posting as an answer), but you could put the icon outside of the `mat-label` then use some CSS to shift to to the appropriate position: https://stackblitz.com/edit/angular-johwa2-p5sobc?file=src%2Fapp%2Ftooltip-auto-hide-example.html Not sure how well it will stand up cross browser, and if you have several fields with icons, you may need tweak the positioning of each one — Ian A, Apr 22 '21 at 13:49
@IanA Thank you so much I think this will do the job. I was think do some hack like this but wanted to know if there is a better way to do. Thank you again this will do for now. — Mystic Groot, Apr 22 '21 at 15:14
@tufonas Thank you for the response I got to learn something today :) — Mystic Groot, Apr 22 '21 at 15:14
@IanA Also, just an another question as a follow up what would you suggest to do if I want the tooltip on touch device ? — Mystic Groot, Apr 22 '21 at 15:17
I would go with @AlesD's answer as that seems a much cleaner solution — Ian A, Apr 23 '21 at 11:16

score 4 · Accepted Answer · edited Apr 23 '21 at 10:01

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.

The above answers is really useful fixed one of my issue. Also please don't forget to add the `import {MatTooltipModule} from '@angular/material/tooltip';` to app.module.ts and to providers. — Mystic Groot, Apr 27 '21 at 21:45

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

1 Answers1