bug(md-tooltip): maximum call stack exceeded when tooltip-position is not "below" - RC6

[ivoviz]

Angular @ 2.0.0-rc.6
Material @ 2.0.0-alpha.7-12

When tooltip-position is set to something else than default (eg. after) the site completely breaks with Maximum call stack size exceeded exception.

Since there is no base plunker with these versions I won't be posting one. The error is easily reproducible though: change https://github.com/angular/material2/blob/master/src/demo-app/tooltip/tooltip-demo.ts#L12 from below to after and run the demo app.

Edit: Haven't really looked at the code in depth, but it seems like this line causes the error. It creates multiple overlayRef for a single tooltip. Removing it makes the component work perfectly. Although it didn't throw before rc.6, it still created way too many overlayRef.

[thegnuu]

I have the same error with v2.0.0-alpha.8-1

[rbaumi]

Same here... before RC.6 everything worked fine. For me default "below" value also throws an error, but in this case the element that the tooltip is set to is shown.

core.umd.js:6001 RangeError: Maximum call stack size exceeded
    at DebugAppView.detectChanges (core.umd.js:12169)
    at ViewRef_.detectChanges (core.umd.js:10159)
    at MdTooltip._updatePosition (tooltip.umd.js:157)
    at MdTooltip.set [as message] (tooltip.umd.js:46)
    at DebugAppView._View_LoginPageComponent0.detectChangesInternal (LoginPageComponent.ngfactory.js:513)
    at DebugAppView.AppView.detectChanges (core.umd.js:12061)
    at DebugAppView.detectChanges (core.umd.js:12166)
    at ViewRef_.detectChanges (core.umd.js:10159)
    at MdTooltip._updatePosition (tooltip.umd.js:157)
    at MdTooltip.set [as message] (tooltip.umd.js:46)

All angular2-material modules I have in version 2.0.0-alpha.8-1 and import them as shown in your all.ts file (without the dialog module that is not yet published to npm).

[ocarreterom]

Angular @ 2.0.0-rc.7
Material @ 2.0.0-alpha.8-1

Same problem.

[rbaumi]

Updated ng2 to 2.0 final release, material still at 2.0.0-alpha.8-1.

Same problem.

[Kosmonaft]

Angular @ 2.0.0
Material @ 2.0.0-alpha.7-4

Same Problem

[jmurphzyo]

Whatever position is set as the default works. If I manually change the predefined position inside the tooltip.js file that position will work and all of the others fail.

[bfwg]

Angular @ 2.0.0-rc.5
Material @ 2.0.0-alpha.8-2

Same Problem

[Ionaru]

Issue still present in

Angular @ 2.0.1
Material @ 2.0.0-alpha.9-3

[alejandrolacasa]

Hi guys,

I made a workaround that consist in adding a *ngIf to the tooltip with a boolean subscribed to the async text (the translate service in my case), so I change the bool value to true whenever the async text has been initialized.

// HTML FILE
...
<i class="material-icons"
   *ngIf="translationLoaded"
   md-tooltip="{{ infoMessage | translate }}">help_outline</i>
...

// TS FILE
...
translationLoaded: boolean = false;
...
ngOnInit() {
  this.translate.get(this.infoMessage).subscribe(data => {
    this.translationLoaded = true;
  });
}
...

[Miiekeee]

Got the same thing :)

[jelbourn]

@andrewseguin can you confirm that this issue is fixed on master?