matTootip on Safari - How to prevent matTootip fro

Question

I'am using a matTooltip from Angular Material for an input field... the input is a kind of overlapped on Safari, so that I can't type in it.

I have been changing the position of the toolTip, but id didn't help.

<input type="text" matInput matTooltip="Vestibulum ac diam sit amet quam vehicula." matTooltipPosition="right" formControlName="password" name="xxx" #inputXxxx>

The toolTip is working fine on all other browser.

This is how the Input filed looks like then:

Any idea how to work around this issue.

Answer 1

Issue is fixed. The solution was in a way simple... I did add the attribute: matTooltip in the mat-form-field instead of in the input itself.

<mat-form-field matInput matTooltip="Vestibulum ac diam sit amet quam vehicula.">
    <input type="text" matTooltipPosition="right" formControlName="password" name="xxx" #inputXxxx>
</mat-form-field>