Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Bootstrap Tooltip not closing on Page Scroll in IE8-11 #14211

Closed
aamirshahzad opened this Issue Jul 22, 2014 · 19 comments

Comments

Projects
None yet
6 participants
@aamirshahzad
Copy link

aamirshahzad commented Jul 22, 2014

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 cvrebert added js labels Jul 22, 2014

@cvrebert cvrebert added this to the v3.2.1 milestone Jul 22, 2014

@cvrebert cvrebert added the confirmed label Jul 22, 2014

@cvrebert

This comment has been minimized.

Copy link
Member

cvrebert commented Jul 22, 2014

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

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

@cvrebert cvrebert changed the title Bootstrap Tool-Tip not closing on Page Scroll in IE-11 Bootstrap Tool-Tip not closing on Page Scroll in IE10-11 Jul 22, 2014

@cvrebert cvrebert changed the title Bootstrap Tool-Tip not closing on Page Scroll in IE10-11 Bootstrap Tool-Tip not closing on Page Scroll in IE9-11 Jul 22, 2014

@cvrebert cvrebert changed the title Bootstrap Tool-Tip not closing on Page Scroll in IE9-11 Bootstrap Tool-Tip not closing on Page Scroll in IE8-11 Jul 22, 2014

@cvrebert cvrebert changed the title Bootstrap Tool-Tip not closing on Page Scroll in IE8-11 Bootstrap Tooltip not closing on Page Scroll in IE8-11 Jul 22, 2014

@hnrch02

This comment has been minimized.

Copy link
Member

hnrch02 commented Jul 22, 2014

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

This comment has been minimized.

Copy link
Member

cvrebert commented Jul 22, 2014

@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

This comment has been minimized.

Copy link
Member

hnrch02 commented Jul 22, 2014

@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.)

@jonathansampson

This comment has been minimized.

Copy link
Contributor

jonathansampson commented Jul 22, 2014

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

This comment has been minimized.

Copy link
Member

cvrebert commented Jul 22, 2014

@jonathansampson Wow, thanks for the fast response time!

@cvrebert

This comment has been minimized.

Copy link
Member

cvrebert commented Jul 22, 2014

@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

This comment has been minimized.

Copy link
Contributor

jonathansampson commented Jul 22, 2014

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

@aamirshahzad

This comment has been minimized.

Copy link
Author

aamirshahzad commented Jul 23, 2014

thanks a lot for a quick response...

@Aourin

This comment has been minimized.

Copy link

Aourin commented Jul 23, 2014

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

This comment has been minimized.

Copy link
Member

hnrch02 commented Jul 23, 2014

@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

@cvrebert cvrebert removed this from the v3.2.1 milestone Jul 23, 2014

@Aourin

This comment has been minimized.

Copy link

Aourin commented Jul 23, 2014

@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.

cvrebert added a commit that referenced this issue Jul 23, 2014

cvrebert added a commit that referenced this issue Jul 24, 2014

Merge pull request #14225 from twbs/issue-14211
Add Wall of Browser Bugs entry for IE bug from issue #14211
@mdo

This comment has been minimized.

Copy link
Member

mdo commented Aug 3, 2014

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

@cvrebert

This comment has been minimized.

Copy link
Member

cvrebert commented Aug 3, 2014

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

This comment has been minimized.

Copy link
Member

cvrebert commented Aug 26, 2014

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

This comment has been minimized.

@cvrebert

This comment has been minimized.

Copy link
Member

cvrebert commented Jul 18, 2015

The IE bug was reopened. 😄

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

@cvrebert

This comment has been minimized.

Copy link
Member

cvrebert commented Apr 4, 2016

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.