Bootstrap Tool-Tip not closing on Page Scroll in IE-8 to IE-11

Question

I am facing this issue in IE-8 to IE-11.

1. Hover a label(etc) with tool tip enabled
2. Now scroll the page with mouse scroll without moving mouse.
3. Notice: Tool tip doesn't closes (IE-8 to 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.

Posted on GitHub as well.

Issue can be observed on bootstrap website as well.

Answer 1

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.