Tooltips lose position in scrollable elements

[austencollins]

First off, I love this library. It's really wonderful.

I'm running into an issue where I have tooltips on elements inside of a scrollable area. The scrollable area is using a javascript scrolling solution (perfect scroll bar). Unfortunately, the tooltips lose their position upon scrolling.

Is there a way to re-initialize them on a scroll event? Perhaps a CSS fix?

Thanks for the wonderful library :)

[wouldgo]

Hi @ac360,

first of all thanks for using this tooltip directive! As a starting point, we appreciate a lot a snippet in plunkr (or other service like that) where we can review the issue. We discuss rigth now that we have many use cases uncovered by our (manual) tests, so with your reported issue we can start to build up some e2e test.

[jclarke0000]

I really like this module, but I am running in to this issue as well. I couldn't make plunkr work, so I'll do my best to describe how to reproduce this issue:

Create a scrollable element (e.g.: div with overflow:auto), and give it a fixed height. Fill it with enough content such that the container scrolls. Put an element with the tooltips directive anywhere in this scrolling container. Now with this rendered in the browser, scroll the element until the element with the tooltip directive is visible. Hover the element, and you will see the tooltip render well below where it should.

It looks like the positioning does not factor in the scrollTop of the parent element.

I hope this helps!

• Jeff

[45kb]

Hi, so now the bug it's clear thanks a lot.

We should consider that the directive should recognize if the element is moving (scrolling) in the page, because simply Re-Positioning the tooltip on Window Scroll would not be enough....

If you guys have some time and would try something for this we'll be much glad, seriously @jclarke0000 @ac360

[omarjcamo]

Hello there! Thanks for the library as well, great stuff!

Just to add a note on this one.. In my case it's not related with a scrollable container but with a series of elements generated by an ng-repeat. Each of these elements has a tooltip. I add and remove dynamically these elements and, after this, the position of the tooltips gets messed up.

In other words, imagine a repeater of inline boxes with different widths and a tooltip each, such as:

[A] [B] [C] [D] [E]

If I remove dynamically, say [C] and I get [A] [B] [D] [E], D's tooltip would be still around the top of [E], instead of re-positioning as well to the left.

I hope this helps, I'll see if I can get a plunkr working with this.

[noahbornstein]

I had the same issue and fixed the problem by editing the following functions to retrieve offsets relative to the viewport, rather than parent containers. (This started around line 100 in unminified script):

        $scope.getRootOffsetTop = function getRootOffsetTop (elem){
          return elem.getBoundingClientRect().top;
        };

        $scope.getRootOffsetLeft = function getRootOffsetLeft (elem){
          return elem.getBoundingClientRect().left;
        };

getBoundingClientRect() returns an object with coordinates (top, bottom, left, and right) relative to the viewport. So long as this calculates each time at the trigger, it should work!

[45kb]

@noahbornstein Hi, thank you for the tip, does it fixed the problem at all?
Could you PR it so we can merge? 👍

[fronterweb]

@noahbornstein
works but not in my case.

I have scrollable list. Each item of this list has tooltip.
Tooltip breaks when you scroll page and scrollable list.

IMO best option would if I be able to set parent element of tooltip.
Now all tooltips lands right before end of tag. It's bad for me.

[amichard]

Hi.

Thanks for the suggested fix using getBoundingClientRect(). I found that I had to subtract scrollTop and scrollLeft to make it work for me.

         $scope.getRootOffsetTop = function getRootOffsetTop (elem, val){
          if (elem.offsetParent === null){

            return val + elem.offsetTop;
          }

          return $scope.getRootOffsetTop(elem.offsetParent, val + elem.offsetTop - elem.scrollTop);
        };

        $scope.getRootOffsetLeft = function getRootOffsetLeft (elem, val){

          if (elem.offsetParent === null){

            return val + elem.offsetLeft;
          }

          return $scope.getRootOffsetLeft(elem.offsetParent, val + elem.offsetLeft - elem.scrollLeft);
        };

I hope this helps.

[45kb]

@amichard this could be a very good solution, just why don't you make elem.scrollLeft and scrollTop dynamic?

You should calculate them everytime user scroll ... am i missing something?

[amichard]

@45kb oh I noticed that it's elem.scrollLeft and scrollTop seems to be updated properly as long as I have tooltip-lazy="false"

I'll have to do further testing to see how it behaves with other settings.

On Wed, Jun 17, 2015 at 11:50 PM, Filippo notifications@github.com wrote:

@amichard https://github.com/amichard this is a good solution, maybe
the best one! Can't you PR it if everything working correctly?

thank you

—
Reply to this email directly or view it on GitHub
#25 (comment)
.

[joaocmfcm]

Hey, first of all, thanks for this lib. It's great. Although, I'm running into this issue too. Inside an

with a fixed height and overflow-y: auto; the items below the defined height have the tool-tip badly positioned once you scroll through the list.

Has this issue been fixed yet?