Angular 7 - ERROR TypeError: Cannot read property 'positionChanges' of undefined for MatTooltip

0
votes

I have implemented angular material. All features are working except mat tooltip. I am getting the following error on mouse hover on console

ERROR TypeError: Cannot read property 'positionChanges' of undefined
at MatTooltip.push../node_modules/@angular/material/esm5/tooltip.es5.js.MatTooltip._createOverlay (vendor.js:142545) at MatTooltip.push../node_modules/@angular/material/esm5/tooltip.es5.js.MatTooltip.show (vendor.js:142438) at HTMLElement. (vendor.js:142263)
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (polyfills.js:7916) at Object.onInvokeTask (vendor.js:87619) at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (polyfills.js:7915) at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (polyfills.js:7683) at ZoneTask.push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (polyfills.js:7991) at invokeTask (polyfills.js:9035)
at HTMLElement.globalZoneAwareCallback (polyfills.js:9061)

I have installed all the necessary modules like 

BrowserAnimationsModule
MatTooltipModule

Even I tried importing OverlayModule from @angular/cdk I am using 

angular 7.1.3, 
"@angular/material": "^7.2.1" 
 @angular/cdk": "~7.2.1

I tried using other versions as well.

I have implemented mat tooltip as follows

<button name="groupModel" class="btn btn-info btn-link" (click)="selectGroup()" matTooltip="view company details" matTooltipPosition="above" triggers="mouseenter"></button>
2
angularangular-material
Stackblitz to reproduce an issue? – Prashant Pimpale

2 Answers

4
votes

Please use the same versions of material and cdk, ^ is not the same as ~, so correct it and run npm install or yarn install again.

0
votes

Just as a clarification of Mateo Tibaquira's answer.

Worked for me but I had to delete my node_modules folder then do an npm install.