Update tooltip custom label example

[jung35]

The canvas.getBoundingClientRect()

returns the size of an element and its position relative to the viewport

So the tooltip should also reflect that as fixed positioning and not absolute

[simonbrunel]

@jung35 can you build a jsfiddle with this change?

[jung35]

I also added pointerevent none because you can't hover over data points with the tooltip blocking from hovering over data point

here is example with
absolute https://jsfiddle.net/r3Lz7371/
vs
fixed https://jsfiddle.net/r3Lz7371/1/

[benmccann]

you used tabs here, but it's spaces everywhere else in the file

[jung35]

oops, kinda made the change on github editor. defaulted to tabs

[simonbrunel]

With position: fixed, if we scroll while the tooltip is displayed, the tooltip doesn't follow the chart but stays under the mouse (which is also a valid use case). With position: absolute, we need to take in account the x/y scroll position:

var pos = this._chart.canvas.getBoundingClientRect();
var x = pos.left + window.pageXOffset;
var y = pos.top + window.pageYOffset;

// ...

el.style.left = x + tooltipModel.caretX + 'px';
el.style.top = y + tooltipModel.caretY + 'px';

// ...

https://jsfiddle.net/r3Lz7371/16/

I think I prefer the absolute behavior because it works better if the tooltip always stay visible, but since it's an example and thus a matter of taste, I don't really mind.

@benmccann @etimberg?

[benmccann]

absolute is better in my mind

[etimberg]

I agree @simonbrunel @benmccann. Absolute is better to me

[benmccann]

@jung35 can you update to use absolute?