bug(tooltip): Change Detection Error When Not in Production Mode

[sqwk]

When not in productionMode() the following error is logged to the console:

EXCEPTION: Expression '{top: top, left: left, display: display} in TooltipContainer@1:5' has changed after it was checked. Previous value: '-1000px'. Current value: '-19px' in [{top: top, left: left, display: display} in TooltipContainer@1:5]

Currently using 1.0.7

<button class="btn btn-secondary" tooltip="Some Tooltip">Miep</button>

—

import {Component} from 'angular2/core'
import {TOOLTIP_DIRECTIVES} from 'ng2-bootstrap/ng2-bootstrap';

@Component({
    …
    directives: [TOOLTIP_DIRECTIVES]
})
export class SomeComponent {
    …
}

[Toktik]

+1

Do you understand what's going on here? I still don't understand how ChangeDetection works, but I tried setting ChangeDetectionStrategy.OnPush on tooltip holder's component (as suggested by others in angular project page). No luck.

[born2net]

+1 same issue in 0.12 quoted: "In development mode, tick() also performs a second change detection cycle to ensure that no further changes are detected. If additional changes are picked up during this second cycle, bindings in the app have side-effects that cannot be resolved in a single change detection pass. In this case, Angular throws an error, since an Angular application can only have one change detection pass during which all change detection must complete." and so I believe since a timer is used for the Alert, it is causing the side effect of the tooltip as its a change not coming from the component's binding.

[MonkeyDo]

I am still getting the same issue with the latest version (1.0.10). Using ChangeDetectorRef.detectChanges() rather than ChangeDetectorRef.markForCheck() in a timeout solved it for me.

[theunreal]

I have the same error when mouseovering my button..

[valorkin]

angular2 version\ng2-bootstrap version\browser\system.js or webpack?

[ruwhan]

got exactly same bug in the modal, I'm using ng2-bs3-modal. system.js.