MatToolTip position is undefined or invalid

Question

Using this simple code here I keep getting a Tooltip position "undefined" is not a valid message

 <mat-form-field matTooltip="Testing tooltips" [matTooltipPosition]='right' #tooltip="matTooltip"> <input matInput [value]="Testing"/> </mat-form-field>

My app_module.ts has

import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import {MatTooltipModule} from '@angular/material/tooltip';

I am using Angular 7.2. Is there something else that I need in order to get the tooltip position to work?

If I remove the matTooltipPosition then the tooltip shows fine but it's not in the place that I want it

I tried now I get "FlexibleConnectedPositionStrategy: At least one position is required." — CodeMan03
– CodeMan03, Commented Feb 7, 2020 at 5:41

Shoaib · Accepted Answer · 2020-02-07 05:42:01Z

You need to remove the [] bracket

<mat-form-field matTooltip="Testing tooltips" matTooltipPosition='right' #tooltip="matTooltip"> <input matInput [value]="Testing"/> </mat-form-field>

melenchenkov · Accepted Answer · 2022-11-15 18:01:10Z

[matTooltipPosition]='right'

This means we are doing Property Binding by which we are searching for this value('right') in the .ts file and as the value is not in the .ts file we are getting the error as invalid

By removing the square brackets [] we are giving the value 'right' directly through HTML file

<mat-form-field matTooltip="Testing tooltips" matTooltipPosition='right' #tooltip="matTooltip"> <input matInput [value]="Testing"/> </mat-form-field>

Collectives™ on Stack Overflow

MatToolTip position is undefined or invalid

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related