Tooltip causing scroll bars to quickly show

[jfarago]

Plunk

Resize the window so it comes up almost to the bottom of the button. Constantly move back and forth over the button to trigger the tool tip. Notice the scroll bar briefly showing sometimes.

[njoy-codilime]

Yeah, please fix it :(

[pkozlowski-opensource]

Yeah, please fix it :(

@njoy-codilime we would love to have your pull request that fixes this issue. We very much appreciate all the help we can get. Thnx!

[RobJacobs]

This issue is fixed in master under PR #4195. Let me know if you can reproduce the issue with the latest build from master and I will re-open the issue.

[jfarago]

It is still happening but far less often

[icfantv]

I can't reproduce this in chrome. This also smells like a positioning issue. What happens if you set overflow: hidden on the parent element? Does it still happen?

Also, what use case are you applying when you "move the cursor back and forth over the button to trigger the tooltip?" I'm trying to think of a normal user scenario where this would apply.

[RobJacobs]

Here is an updated plunk with the latest from master. I'm not seeing the problem with this version...

[jfarago]

It is defiantly a positioning issue, if i move back and forth over the button with a tool tip over and over every once and awhile i will see the tooltip briefly show underneath which is moving outside the viewport. I just tried the plunker and am not seeing the issue. I will be sure to grab the latest tomorrow when i get to work and try it again. I appreciate your quick responses.

[icfantv]

Souds good @jfarago, please keep us posted. Thanks.

[jfarago]

@icfantv I have confirmed that is no longer an issue, thanks again. How do I get the latest tpls.js file. If I download the master it resolves to the 13.4 build. Do I need to clone the depot at the latest commit and then run some kind of build script?

[RobJacobs]

You would need to clone the repository to your local machine, then run npm install and then run grunt. The the compiled files will show up in the dist folder.

You could also copy the contents of the bootstrap-ui.js files in the plunk I created as that is a build from master as of yesterday.

[icfantv]

@jfarago cool, thanks.

[jfarago]

@RobJacobs & @icfantv i updated my project with a build from today and the problem is back. Here is a plunk.

[icfantv]

@jfarago, any particular reason you're including UI Bootstrap twice? I'm also not seeing that this is a SNAPSHOT build from master.

[jfarago]

@icfantv including it twice was an accident. To get the latest I downloaded the project and did a build myself.

[icfantv]

I'm a little confused. When we do SNAPSHOT builds, the header indicates thus as follows:

foo at bar in ~/source/oss/forks/bootstrap/dist on tabs_prefix
± head ui-bootstrap-tpls-0.14.0-SNAPSHOT.js
/*
 * angular-ui-bootstrap
 * http://angular-ui.github.io/bootstrap/

 * Version: 0.14.0-SNAPSHOT - 2015-09-30
 * License: MIT
 */

[jfarago]

I dont know how you generate a snapshot build. I followed the directions that @RobJacobs provided above.

"You would need to clone the repository to your local machine, then run npm install and then run grunt. The the compiled files will show up in the dist folder.

You could also copy the contents of the bootstrap-ui.js files in the plunk I created as that is a build from master as of yesterday."

[icfantv]

So, I'm assuming you just did the latter? Humor me please, and do a command-line build. Note that those instructions assume you have grunt installed via the -g flag.

[jfarago]

I actually did the former. In the plunk i provided I placed in the code from the build i did today.

[icfantv]

I'm not sure how you're doing your builds then because you should be getting the SNAPSHOT version in the header - if you're only seeing 0.14.0 without the SNAPSHOT, that seems to indicate you're building the 0.14.0 release version and not the latest from master.

Please try the attached file (rename to JS as apparently GitHub doesn't support the .js extension) and let us know. Also, you haven't answered my question about use case. What use case are you covering when you move the cursor rapidly over an item with a tooltip/popover? I would argue that this is not a normal scenario.

ui-bootstrap-tpls-0.14.0-SNAPSHOT.txt

[jfarago]

Thanks, i will look into why i am not building the latest. To answer your question, there is not a use case for rapidly moving over an item, that was just a quick way to see it happen. The scroll bars are popping up only sometimes when you move over the item. I updated the plunk with the code you provided and the problem persists.

[icfantv]

Ok. This is such a corner case, I can't promise that we'll be able to do anything about it.

[jfarago]

Okay, I appreciate you looking into this. When a control with a tooltip is on the bottom of a page it displays the scroll bars somewhat consistently but I am assuming most pages dont have controls that close to the viewport.

[icfantv]

You're welcome and sorry we couldn't do more easily. I would agree that having controls that close to the bottom of the viewport is probably not typical. Additionally, since angular is designed for single paged apps, one could also argue that scrolling is not needed/desired for the entire viewport. If this is the case, you might consider setting overflow: hidden on <body> and that would certainly prevent the scrollbars from showing.

Also, having smart positioning on the tooltips/popovers should, in theory, also rectify this. However, we don't have smart positioning. It's something we are considering for NG2 support w/ BS4 via an implementable interface (so one could plug in something like Tether) - but that's only an idea on the roadmap at this point.

[SimonStiph]

I can confirm this issue also on build 0.13.4 on Chrome 45. Since my app requires vertical scrolling, I also cannot use the overflow fix on . I can also confirm the issue is not present in 0.13.3.

BTW this is occuring with the tooltip placed on a tag at both the top and the middle of the page. Haven't been able to conjure a solution yet, though.

[jfarago]

@icfantv I understand this is not high on your priority list but can you open the bug?

[icfantv]

Yes.

[cassilup]

Found out that Angular's digest cycle is sometimes causing a delay between the moment the tooltip element is added to the DOM and the moment that it is correctly positioned. Discovered that if the tooltip is hidden by default (display: none) and only displayed once it is positioned (display: block), the bug goes away.

[RobJacobs]

Suggested fix is to add top: -9999px and left: -9999px to the tooltip template style here. Updated plunk that shows the results.

[armanforghani]

This issue persists in RTL direction.
This can be for fixing with top: -9999px and left: -9999px. This hack does not work and should not be used for RTL pages.