search

angular-ui / bootstrap

PLEASE READ THE PROJECT STATUS BELOW. Native AngularJS (Angular) directives for Bootstrap. Smaller footprint (20kB gzipped), no 3rd party JS dependencies (jQuery, bootstrap JS) required. Please read the README.md file before submitting an issue!
http://angular-ui.github.io/bootstrap/
MIT License
14.29k stars 6.73k forks source link

uib-tooltip offset when scrolling while built-in bootstrap tooltip isn't #6261

Open HugCoder opened 7 years ago

HugCoder commented 7 years ago

Bug description:

If I'm at the top of the page (0 scrolling) I get OK placement of tooltips: tooltip_ok The more I scroll down, the more the tooltip is offset (mouse still on top button): tooltip_offset

I really cannot find any conflicting scripts or css I use that seems to cause this. I tried with CSP on/off and append-to-body true/false. I need it true though, since I have buttons that use a justify-content css with flow, and having it not append-to-body causes flickers and offsets in the buttons within the justify-content. Perhaps this is a separate bug for another issue though.

The buttons are within a table and I found this old issue talking about wrong positioning in tables: https://github.com/angular-ui/bootstrap/issues/115 It was supposedly solved by moving over to $position though.

Link to minimally-working plunker that reproduces the issue:

Unfortunately I haven't been able to create a plunker that replicates the issue yet, but I tried and ended up with this, which "unfortunately" is working, somewhat at least. I cannot get the built-in Bootstrap tooltips to work though. https://plnkr.co/edit/3OCKeZx1ceeaJv6ozNko?p=preview

Version of Angular, UIBS, and Bootstrap

Angular: 1.5.8 UIBS: 2.1.4 Bootstrap: 3.3.7

RobJacobs commented 7 years ago

In your plunk, you are loading both the TWBS javascript and angular-ui-bootstrap library. Angular-ui-bootstrap is designed to replace the TWBS javascript, you can not use both at the same time.

HugCoder commented 7 years ago

@RobJacobs Hmm, are you sure about that? I don't see that anywhere in the documentation. I thought they were completely separate and on different dependencies.

I just tried removing TWBS from my real project and I still get the positional bugs when scrolling, so that wasn't the solution at least. Any other idea? What could possibly change the position of the tooltips when scrolling? (I tried switching off append-to-body)

supruniuk commented 7 years ago

@HugCoder Issue is easy to reproduce if to set body's position to absolute <body style="position:absolute"> in your plunk.