Tooltip doesn't follow guidline on scroll

[Vieshanis]

I am using: "angular-nvd3": "1.0.9" "d3": "3.5.17", "nvd3": "1.8.1", "angular": "1.5.8", and Fuse admin template.

Problem appears when there are many charts in one page. If you scroll down page, then tooltips doesn't follow guideline. See picture below. If I would scroll further down, then tooltip isn't visible at all. Inspecting in Chrome Developer tools, checking this on third, forth, fifth (and so on) chart- The tooltip shows only on last (2nd) chart where tooltip was working. <div class="nvtooltip xy-tooltip nv-pointer-events-none" id="nvtooltip-45529" style="top: 0px; left: 0px; opacity: 0; transform: translate(279px, 826px) !important;">

[oxy-code]

Sorry for the very late response.

I hope you've been using useInteractiveGuideline: true

• If so then .nvtooltip element were populated beneath the nvd3 element. And fuse theme md-content has styles like position:absolute;top:0 so when you scroll on the main content, the page get extended from the md-content initials and our mouse postion event.clientY is just based on the screen (not calculated based on the md-content initials).So the mouse event.clientY is based on the screen and this is why the tooltips are not in right position.

To fix this I have two solutions:

1. useInteractiveGuideline: false - This will populate .nvtooltip within document.body and the tooltips will be in right position. But you cannot see grouped tooltip information.
2. If you still want to use useInteractiveGuideline: true - Then you need some edits in the nvd3 library
   • change lines chartContainer(that.parentNode) to chartContainer(document.body)
   • but this step is not tested so it should be at your own risk.

[Vieshanis]

@oxy-code I followed your advice on:

• change lines chartContainer(that.parentNode) to chartContainer(document.body)

And it did work, but .position must be adjusted, could you please provide some ideas? I have set .position({left: pointXLocation + margin.left - 414, top: e.mouseY + margin.top +366}) It doesn't look perfect but at least it works.

[oxy-code]

@Vieshanis

try

interactiveLayer: {
     gravity:'s'
     ....
}

or

Kindly replicate your issue in the jsfiddle or some other, So that i can look through it.

Thanks.

[RedScourge]

I found a bug regarding tooltip scrolling in the current version 1.8.6-dev, may apply to this. For me, the solution was to add window.scrollY to top in the inline function var positionTooltip = function(){ ... }

[emasreed]

I have found the same issue. Even when there is a single graph on the page, if there is scrolling involved the tool tip position will be off by the amount scrolled. I tried changing the chartContainer, but it seems that this function is deprecated. In addition, I tried adding the window.scrollY and it also didn't work. I also tried the change to the interactive layer css, but the interactive layer tag, no longer seems to be included in the css file. I believe there is a bug somewhere in the code that doesn't recalculate the data points based on the scroll.

[Exavior]

Any progress on this? Really frustrated with nv.d3 so far. Seems super awesome, but it also seems out dated and full of unaddressed bugs.

[RedScourge]

@Exavior If the issue is the one I ran into, just use the version from this pull request here which has the fix:

https://github.com/novus/nvd3/pull/2215

They apparently still haven't pulled it into the main branch, but this variant works for me. I wonder if the guy who owns this project died or something.