Errors in Custom Tooltips documentation code example and related samples

[InhumanSoul]

In the code example under External (Custom) Tooltips in the documentation the lines

tooltipEl.style.fontFamily = tooltipModel._fontFamily;
tooltipEl.style.fontSize = tooltipModel.fontSize;
tooltipEl.style.fontStyle = tooltipModel._fontStyle;

should presumably be

tooltipEl.style.fontFamily = tooltipModel._bodyFontFamily;
tooltipEl.style.fontSize = tooltipModel.bodyFontSize + 'px';
tooltipEl.style.fontStyle = tooltipModel._bodyFontStyle;

since tooltipModel doesn't contain _fontFamily, fontSize or _fontStyle.

These errors also exist in the samples for line and pie charts with HTML tooltips.

I would also like to suggest that this code example in the documentation should disable the standard tooltips like the samples do, adding:
enabled: false
By the way, the description of this enabled option isn't clear whether it enables/disables only the standard tooltips (excluding custom tooltips) or tooltips altogether (including custom tooltips). Currently it is the former.

Another problem with the example code for custom tooltips in the documentation is that it defines an element with a non-existent CSS class which some people could find a bit confusing:
var span = '<span class="chartjs-tooltip-key" style="' + style + '">
The easiest solution is probably just to remove the class attribute in the documentation example and keep it in the samples where that class is actually defined.

Finally, I would also like to point out that the "link" to the sample mentioned just after the code example is wrong. The correct "link" to that sample should be samples/tooltips/custom-line.html (or http://www.chartjs.org/samples/latest/tooltips/custom-line.html for the live example). However, since there are several relevant examples possibly all should be listed. Alternatively just a link to the page for all the samples could suffice.

(At the time of this issue the current latest documentation/samples are for chart.js 2.7.1.)

[andrewvanhemelrijck]

I'm having a hard time getting the custom tooltip example from the documentation to work at all. Fixing the issues pointed out by @InhumanSoul fixed a few problems, but it's still not 100%.

Additional issues appear to be that it writes the tooltip element into the body here: document.body.appendChild(tooltipEl); then sets top and left styles which don't do anything on a statically positioned element. (Inspecting the page shows tooltipEl sitting at the end of the body).

I've had some success putting tooltipEl into the same parent as the chart canvas: this._chart.canvas.parentElement.appendChild(tooltipEl); then setting position relative on the parent, position absolute on tooltipEl, and changing around the top and left styles a little like this:

this._chart.canvas.parentElement.style.position = 'relative';
tooltipEl.style.position = 'absolute';
tooltipEl.style.left = tooltipModel.caretX + 'px';
tooltipEl.style.top = tooltipModel.caretY + 'px';

But it feels like it's missing something. I'm running version 2.7.1 as well by the way.