My problem is that when the chart drawing area of is smaller than a highchart tooltip, a part of the tooltip is hidden where it overflows the chart drawing area.
I w
A modern approach (Highcharts 6.1.1 and newer) is to simply use tooltip.outside (API):
Whether to allow the tooltip to render outside the chart's SVG element box. By default (
false), the tooltip is rendered within the chart's SVG element, which results in the tooltip being aligned inside the chart area. For small charts, this may result in clipping or overlapping. Whentrue, a separate SVG element is created and overlaid on the page, allowing the tooltip to be aligned inside the page itself.
Quite simply this means setting this one value to true, for example:
Highcharts.chart('container', {
// Your options...
tooltip: {
outside: true
}
});
See this JSFiddle demonstration of how setting this value to true fixes space/clipping issues.