Components: Tooltip doesn't disappear on mouseout in IE

[Abrissirba]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

1. Having multiple elements with tooltips next to each other.
2. Hover the mouse from one element to the next.
3. I expect the tooltip from the previous hovered element to disappear

What is the current behavior?

When the mouse goes from one tooltip enabled element to another sibbling tooltip enabled element, it doesn't disappear in IE11

What are the steps to reproduce?

http://plnkr.co/edit/UXqNrGLduszLtdpChmXP?p=preview

Which versions of Angular, Material, OS, browsers are affected?

Angular 2.4.9, Angular material master, Windows 7, IE11

[jotatoledo]

Same problem in firefox v45.8.0

[chouclee]

Same problem in Safari version 10.0.2 (11602.3.12.0.1)

How to reproduce: hover several tooltips quickly. Trigger a new tooltip before previous tooltip animation is finished.

Unhandled Promise rejection: (8)
"e[0].push is not a function. (In 'e[0].push(1)', 'e[0].push' is undefined)"
"; Zone:"
"<root>"
"; Task:"
"Promise.then"
"; Value:"
TypeError: e[0].push is not a function. (In 'e[0].push(1)', 'e[0].push' is undefined) — web-animations.min.js:16:6248
g — web-animations.min.js:16:6248
j — web-animations.min.js:16:7328
g — web-animations.min.js:15:11362
e — web-animations.min.js:15:10178
convertEffectInput — web-animations.min.js:15:10472
KeyframeEffect — web-animations.min.js:15:12836
animate — web-animations.min.js:15:15867
animate — web-animations.min.js:16:12401
init — web_animations_player.js:89
forEach
init — animation_sequence_player.js:65
play — animation_sequence_player.js:85
_triggerAnimations — animation_queue.js:48
run — zone.js:126

[MateuszG]

I also have same problem on Safari 10 and IE 11.5, on newest Firefox and Chrome everything works.

[xrochoa]

Same thing over here! Safari 10.
ERROR – TypeError: i[0].push is not a function. (In 'i[0].push(1)', 'i[0].push' is undefined)

[jotatoledo]

Have anyone tried this with the latest version of angular? (4.0.0)

[MateuszG]

I have tried

"dependencies": {
"@angular/animations": "^4.0.0",
"@angular/common": "4.0.0",
"@angular/compiler": "4.0.0",
"@angular/core": "4.0.0",
"@angular/forms": "4.0.0",
"@angular/http": "4.0.0",
"@angular/material": "2.0.0-beta.2",
"@angular/platform-browser": "4.0.0",
"@angular/platform-browser-dynamic": "4.0.0",
"@angular/router": "4.0.0",
"angular2-cookie": "1.2.6",
"compression": "1.6.2",
"core-js": "2.4.1",
"express": "4.15.2",
"file-saver": "1.3.3",
"flexboxgrid": "6.3.1",
"font-awesome": "4.7.0",
"hammerjs": "2.0.8",
"lodash": "4.17.4",
"muicss": "0.9.12",
"ng2-pagination": "2.0.1",
"ng2-progressbar": "1.3.0",
"ng2-translate": "5.0.0",
"ng2-webstorage": "1.5.1",
"object-fit-images": "3.1.3",
"rxjs": "5.2.0",
"ts-helpers": "1.1.2",
"web-animations-js": "2.2.2",
"zone.js": "0.8.5"
},
"devDependencies": {
"@angular/cli": "1.0.0",
"@angular/compiler-cli": "4.0.0",
"@types/jasmine": "2.5.46",
"@types/lodash": "4.14.57",
"codelyzer": "3.0.0-beta.4",
"jasmine-core": "2.5.2",
"jasmine-spec-reporter": "3.2.0",
"karma": "1.5.0",
"karma-chrome-launcher": "2.0.0",
"karma-cli": "1.0.1",
"karma-jasmine": "1.1.0",
"karma-remap-istanbul": "0.6.0",
"protractor": "5.1.1",
"ts-node": "3.0.2",
"tslint": "4.5.1",
"typescript": "2.2.1"
}

[jelbourn]

Seems to be working fine in the latest version.

Be sure to check out the changelog for the latest release in regards to changes w/ animations.

[jotatoledo]

I´m still having issues with the tooltip element on firefox in the case that I import web-animations-js on the polyfillfile. The app will crash with the following error:

ERROR TypeError: e[0].push is not a function
Stack trace:
g@http://localhost:4300/polyfills.bundle.js:2270:6264
j@http://localhost:4300/polyfills.bundle.js:2270:7334
g@http://localhost:4300/polyfills.bundle.js:2269:11368
e@http://localhost:4300/polyfills.bundle.js:2269:10321
[658]/</</</b.convertEffectInput@http://localhost:4300/polyfills.bundle.js:2269:10511
[658]/</</</b.KeyframeEffect@http://localhost:4300/polyfills.bundle.js:2269:12875
[658]/</</</window.Element.prototype.animate@http://localhost:4300/polyfills.bundle.js:2269:15909
[658]/</</window.Element.prototype.animate@http://localhost:4300/polyfills.bundle.js:2270:12407
WebAnimationsPlayer.prototype._triggerWebAnimation@http://localhost:4300/vendor.bundle.js:71015:17
WebAnimationsPlayer.prototype.init@http://localhost:4300/vendor.bundle.js:70998:24
DomAnimationEngine.prototype._queuePlayer@http://localhost:4300/vendor.bundle.js:70289:9
DomAnimationEngine.prototype.animateTransition@http://localhost:4300/vendor.bundle.js:70204:1
DomAnimationEngine.prototype.setProperty@http://localhost:4300/vendor.bundle.js:70075:13
AnimationRenderer.prototype.setProperty@http://localhost:4300/vendor.bundle.js:125315:1
DebugRenderer2.prototype.setProperty@http://localhost:4300/vendor.bundle.js:13473:9
setElementProperty@http://localhost:4300/vendor.bundle.js:9748:5
checkAndUpdateElementValue@http://localhost:4300/vendor.bundle.js:9667:13
checkAndUpdateElementInline@http://localhost:4300/vendor.bundle.js:9603:24
checkAndUpdateNodeInline@http://localhost:4300/vendor.bundle.js:12294:23
checkAndUpdateNode@http://localhost:4300/vendor.bundle.js:12269:16
debugCheckAndUpdateNode@http://localhost:4300/vendor.bundle.js:12898:38
debugCheckRenderNodeFn@http://localhost:4300/vendor.bundle.js:12877:13
View_TooltipComponent_0/<@ng:///MdTooltipModule/TooltipComponent.ngfactory.js:119:5
debugUpdateRenderer@http://localhost:4300/vendor.bundle.js:12862:1
checkAndUpdateView@http://localhost:4300/vendor.bundle.js:12241:5
callViewAction@http://localhost:4300/vendor.bundle.js:12551:17
execComponentViewsAction@http://localhost:4300/vendor.bundle.js:12497:13
checkAndUpdateView@http://localhost:4300/vendor.bundle.js:12242:5
callViewAction@http://localhost:4300/vendor.bundle.js:12551:17
execEmbeddedViewsAction@http://localhost:4300/vendor.bundle.js:12523:17
checkAndUpdateView@http://localhost:4300/vendor.bundle.js:12237:5
callViewAction@http://localhost:4300/vendor.bundle.js:12551:17
execComponentViewsAction@http://localhost:4300/vendor.bundle.js:12497:13
checkAndUpdateView@http://localhost:4300/vendor.bundle.js:12242:5
callViewAction@http://localhost:4300/vendor.bundle.js:12551:17
execEmbeddedViewsAction@http://localhost:4300/vendor.bundle.js:12523:17
checkAndUpdateView@http://localhost:4300/vendor.bundle.js:12237:5
callViewAction@http://localhost:4300/vendor.bundle.js:12551:17
execComponentViewsAction@http://localhost:4300/vendor.bundle.js:12497:13
checkAndUpdateView@http://localhost:4300/vendor.bundle.js:12242:5
callViewAction@http://localhost:4300/vendor.bundle.js:12551:17
execEmbeddedViewsAction@http://localhost:4300/vendor.bundle.js:12523:17
checkAndUpdateView@http://localhost:4300/vendor.bundle.js:12237:5
callViewAction@http://localhost:4300/vendor.bundle.js:12551:17
execComponentViewsAction@http://localhost:4300/vendor.bundle.js:12497:13
checkAndUpdateView@http://localhost:4300/vendor.bundle.js:12242:5
callWithDebugContext@http://localhost:4300/vendor.bundle.js:13224:39
debugCheckAndUpdateView@http://localhost:4300/vendor.bundle.js:12764:12
ViewRef_.prototype.detectChanges@http://localhost:4300/vendor.bundle.js:10333:54
ApplicationRef_.prototype.tick/<@http://localhost:4300/vendor.bundle.js:5263:58
ApplicationRef_.prototype.tick@http://localhost:4300/vendor.bundle.js:5263:13
ApplicationRef_/<.next/<@http://localhost:4300/vendor.bundle.js:5143:100
[663]/</</ZoneDelegate.prototype.invoke@http://localhost:4300/polyfills.bundle.js:2642:17
NgZone.prototype.forkInnerZoneWithAngularBehavior/this.inner<.onInvoke@http://localhost:4300/vendor.bundle.js:4336:28
[663]/</</ZoneDelegate.prototype.invoke@http://localhost:4300/polyfills.bundle.js:2641:17
[663]/</</Zone.prototype.run@http://localhost:4300/polyfills.bundle.js:2402:24
NgZone.prototype.run@http://localhost:4300/vendor.bundle.js:4205:51
ApplicationRef_/<.next@http://localhost:4300/vendor.bundle.js:5143:70
EventEmitter.prototype.subscribe/schedulerFn<@http://localhost:4300/vendor.bundle.js:4039:36
SafeSubscriber.prototype.__tryOrUnsub@http://localhost:4300/vendor.bundle.js:42492:13
SafeSubscriber.prototype.next@http://localhost:4300/vendor.bundle.js:42441:17
Subscriber.prototype._next@http://localhost:4300/vendor.bundle.js:42381:9
Subscriber.prototype.next@http://localhost:4300/vendor.bundle.js:42345:13
Subject.prototype.next@http://localhost:4300/vendor.bundle.js:49244:17
EventEmitter.prototype.emit@http://localhost:4300/vendor.bundle.js:4025:54
NgZone.prototype.checkStable@http://localhost:4300/vendor.bundle.js:4301:17
NgZone.prototype.onLeave@http://localhost:4300/vendor.bundle.js:4377:9
NgZone.prototype.forkInnerZoneWithAngularBehavior/this.inner<.onInvokeTask@http://localhost:4300/vendor.bundle.js:4330:21
[663]/</</ZoneDelegate.prototype.invokeTask@http://localhost:4300/polyfills.bundle.js:2674:17
[663]/</</Zone.prototype.runTask@http://localhost:4300/polyfills.bundle.js:2442:28
ZoneTask/this.invoke@http://localhost:4300/polyfills.bundle.js:2737:28
timer@http://localhost:4300/polyfills.bundle.js:3817:17

I´ll try to reproduce the problem on a plnkr asap

[jelbourn]

Re-opening this as it seems to still be a problem, albeit with the web animations polyfill rather than Material.

[compitDanielos]

Update "web-animations-js": "2.2.5" should fix

[jotatoledo]

Is currently solved for me with the latest versions of @angular/material and web-animations.
@jelbourn you can close the issue

[josephperrott]

Closing per update

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}