Custom tooltip changing position when scrolling

[brunocoelho]

Expected Behavior

Tooltip should stay on the original position when scrolling.

Current Behavior

Tooltip is changing position when scrolling.

Possible Solution

Steps to Reproduce (for bugs)

Codepen: http://codepen.io/anon/pen/aJBYVR
Gif from my computer:

1. Create a chart with a custom tooltip.
2. Make sure the page have other elements and it's gonna scroll.
3. Scroll the page up and down.

Context

Environment

• Chart.js version: 2.4.0 and 2.5.0
• Browser name and version: Chrome 56.0.2924.87; Firefox 48.0.1; Safari 10.0.3

[simonbrunel]

You use canvas.getBoundingClientRect() to position your tooltip, which is not correct because it returns "the size of an element and its position relative to the viewport.". When you scroll, this method returns a negative top value, that's why the tooltip position changes.

Instead, if the tooltip is in the same container as the canvas, you should use canvas.offsetLeft and canvas.offsetTop (codepen).

[brunocoelho]

Thanks @simonbrunel it helped. Would it be the case to fix the sample code? I just copied from there.

I also needed to add canvas's wrapper top and left, for some reason it was interfering:

var canvas = this._chart.canvas;
var canvasContainer = $(canvas).parents('.container')[0];

tooltipEl.style.left = canvas.offsetLeft + canvasContainer.offsetLeft + tooltip.caretX + "px";
tooltipEl.style.top = canvas.offsetTop + canvasContainer.offsetTop + tooltip.caretY + "px";

[simonbrunel]

You right, examples need to be fixed. offset* properties return position of the element inside the first positioned container, so the easiest is to add the tooltip as a child of the canvas wrapper and make sure that the canvas wrapper has position: relative. Then, I think you don't need to add the extra canvasContainer.offset* values.

[brunocoelho]

hum, I think it does make sense. I let you know when I have a chance to take a look at it again and we can close this issue.

[brunocoelho]

You right, If I add the element inside the canvas I can have it positioned properly. My problem is that I have two charts on the same page and when I hover over the second chart, the tooltip is positioned based on the first chart. Anyway, I could positioned it properly inserting it on the body no matter how many charts I have on a page.

Thanks for your attention. 👍

[mundomatt]

@simonbrunel When you have many charts on the same page the offset values do not position the tooltips properly, especially when you can scroll on the page as well. A simple fix is to make the tooltip element position fixed.

Codepen: https://codepen.io/anon/pen/YaZNwL