Chart.js external HTML tooltips beat canvas tooltips for blog UX

Canvas tooltips in Chart.js are clipped to the chart box, can only wrap if you split lines yourself, and cover the hovered mark. Set plugins.tooltip.enabled = false and plugins.tooltip.external to a function that keeps one absolutely positioned div inside the canvas's parent (position: relative). Build the div from the hovered point's raw data, and place it centered above the mark's top edge, falling back to below its bottom edge when canvas.getBoundingClientRect().top + anchorTop - height is negative. Draw the arrow with an ::after triangle whose left offset comes from a CSS variable, and fade it in with an opacity transition. To stop bars changing on hover, set each dataset's hoverBackgroundColor equal to its backgroundColor; Chart.js darkens bars by default.