Bootstrap Tooltip not closing on Page Scroll in IE8-11

[aamirshahzad]

I am facing this issue in IE-11.

1. Hover a label(etc) with tool tip enabled
2. Now scroll the page without moving the mouse/pointer (e.g. using the mouse scrollwheel or up/down arrow keys on the keyboard).
3. Notice: Tool tip doesn't closes (IE-11).

I have I having all labels with tool tips while I scroll down and reach the second label with tool tip it still shows previous label tool tip instead of new. The issue is minor but I am working on it to fix any one has previously fixed this issue? Its working fine in Firefox, Chrome and other common browsers.

Issue can be observed on bootstrap website as well.
http://getbootstrap.com/javascript/#tooltips

I have posted it on stack overflow as well.
http://stackoverflow.com/questions/24881513/bootstrap-tool-tip-not-closing-on-page-scroll-in-ie-11

[cvrebert]

Confirmed. Same behavior on IE8, IE9, and IE10 too.

Relevant spec: http://dev.w3.org/csswg/selectors4/#the-hover-pseudo

[hnrch02]

Testing this using the visual tooltip test page you can also see that the button doesn't lose its hover styles until the mouse is moved again, so I'm guessing this is a problem with IE that we can't really fix.

[cvrebert]

@hnrch02 Can you confirm with IE11 that hovering over the button on http://jsfiddle.net/cvrhulu/er4LM/3/show and then scrolling leaves the button still colored red? Seems to be the case on Sauce, but Sauce's scrolling is a bit wonky, so I'd appreciate confirmation from someone with an actual Windows box or full Windows VM.

[hnrch02]

@cvrebert Yes, that is the case. Had a friend with a Windows machine and IE11 confirm this. (And also tested in IE8-10 on my VMs.)

[cvrebert]

Filed IE bug: https://connect.microsoft.com/IE/feedback/details/926665/ie-11-hovering-over-an-element-and-then-scrolling-without-moving-the-mouse-pointer-leaves-the-element-in-hover-state

[jonathansampson]

Thanks for filing the IE bug; I'll check it out immediately. Worth noting the opposite event (scrolling something up under a fixed cursor) doesn't result in a :hover state, though one would expect that too. I'll look around internally to see if this has already been reported.

[cvrebert]

@jonathansampson Wow, thanks for the fast response time!

[cvrebert]

@jonathansampson Also, FYI, part of the signup flow (starting from the "Submit Feedback" button on https://connect.microsoft.com/ie/ when not logged in) was broken for me. Kept getting a HTTP 500 error page during the MS Connect signup phase (after the MS Account signup phase). Ended up having to signup from the main MS Connect homepage using the MS Account I'd created. I know this is probably not your department, but hopefully you can let the right people know.

[jonathansampson]

@cvrebert I'll pass that along to the appropriate parties right now.

[aamirshahzad]

thanks a lot for a quick response...

[TheBubbleDuck]

So I did some testing and the problem occurs on Chrome as well. It isn't until you click the tooltip that Chrome works and IE doesn't.

Digging deeper into the issue, it seems that both browsers don't recognize a mousemove event when you are scrolling. So if you hover in either browser, then scroll down or up, the tooltip stays. When you click the tooltip in Chrome, scrolling will then trigger a mouseevent which seems to be what triggers the mouseout/mouseenter. In IE, it doesn't add the scrolling mouse trigger. It may actually not be a browser issue, but the way bootstrap is handling when to add that extra "scroll is also a mousemove" trigger.

To test it yourself, try adding a mouse move event in your console for bootstraps website/tooltip.js

$(document).mousemove(function(event) {console.log(event);});

Moving the mouse should trigger events in the console. If you hover of the tooltip and scroll away, it will still stay up. Then, click the tooltip and notice that scrolling will now trigger the same mouse event in Chrome and not in IE.

Based on the initial behavior prior to clicking the tooltip, I am assuming there is just something that might need to be added to support IE mousemove on scroll.

[hnrch02]

@Aourin That doesn't happen for me in Chrome 36.0.1985.125 on Windows: http://cl.ly/Wj1M
Neither does it happen for Chrome 37.0.2062.20 beta on OS X: http://cl.ly/Wiu5

[TheBubbleDuck]

@hnrch02 Hey, thanks for showing me this. I guess my added mouseevent in the console is messing things up. So I will edit it. Out of the box, it seems to work fine in Chrome. It isn't until I bound mousemove event it seems to break it. However, adding that event emulates the same behavior as IE until you trigger the first hover. Then it readds the correct scroll and mouse move. IE straight up doesn't have any mousemoves when scrolling. It is just a guess, but I think it has something to do with how IE is handling the bind of that mousemove because that seems to be what actually triggers whether the tooltip pops up or not. It seems browsers aren't natively triggering a mousemove on scroll and I bootsrap is adding it.

[mdo]

@cvrebert Since we documented this bug, is there anything else to do?

[cvrebert]

A workaround involving a callback for the scroll event might be possible, but it doesn't seen worth it for v3 given how minor this bug is.

[cvrebert]

IE bug report update:

Although we have resolved this feedback as “Won’t Fix”, we are considering it in a later release of IE.

[cvrebert]

Now documented on MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/:hover$compare?to=661727&from=494205

[cvrebert]

The IE bug was reopened. 😄

Also, I added a test for this to the W3C CSS test suite: w3c/csswg-test#792

[cvrebert]

Successor bug against Edge: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7108183/