Popover position is so far from button on scroll

[slowas]

Hello,

I'am have issue with scrolling and dinamic content. Scrolled and then clicked on table tr tag. Popover in wrong position. https://imgur.com/a/RwV4812

[dev-nilton]

Hey @slowas I was having the same problem and managed to solve it editing just a couple of lines in the source of the popover component. After some debugging, I noticed that the Y being used to calculate the position is relative to the visible window, not to the actual viewport as one'd expect. So when you're at the top of the page, everything works fine because the distance to the top is the same for both the container and the window. As you scroll down, the target element gets closer to the top of the window and the value in Y smaller, that's why the popover gets left behind at the top. I'm guessing that this happens when there's an element with relative positioning wrapping the target element, i.e. an ancestor.

I'll show you the edit directly in the dist source, so you can easily test it. .../node_modules/vue-js-popover/dist/index.js

/* Line 325: Change the first parameter being passed from "target" to "event". */
// var position = _this.getDropdownPosition(target, _this.$refs.dropdown, direction);
var position = _this.getDropdownPosition(event, _this.$refs.dropdown, direction);

// Line 342: Change the function signature to match, and reassign the target on the first line
// getDropdownPosition: function getDropdownPosition(target, dropdown, direction) {
getDropdownPosition: function getDropdownPosition(event, dropdown, direction) {
      var target = event.target;
      // ... After a couple of lines of code, change the "offsetTop" as below
      /* This is how it was */
      // var offsetTop = trRect.top;
      /* How it is now */
      var offsetTop = event.srcEvent.pageY - event.srcEvent.layerY;

Hope it helps, cheers!

[slowas]

@nilton-neto Thank you very much 💯

[mhluska]

Can we make a PR for this and possibly merge it into master? 😛