Highcharts: Show tooltip anywhere over series value column without using shared:true? - highcharts

Question

Probably a stupid sounding question, but I want my Highcharts column tooltip to display when I mouseover anywhere above or on the column, but I don't want to use the tooltip shared:true attribute.
I'm doing this because my client has some columns that are tiny compared to their neighbors. It would be nice if the mouseover worked before I got close to the tiny columns.
Screenshot of what I'm trying to ask:
Here is a fiddle.
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Find Tauntauns'
},
subtitle: {
text: 'Some site on the web'
},
xAxis: {
categories: [
'Jan'
],
crosshair: true
},
yAxis: {
min: 0,
title: {
text: 'Tauntauns'
}
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
footerFormat: '</table>',
//shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: 'Tokyo',
data: [7]
}, {
name: 'Hoth',
data: [83.6]
}, {
name: 'London',
data: [48.9]
}, {
name: 'Berlin',
data: [5]
}]
});

Answer 1

Unfortunately, this option is not available from the API for the column series type because the pointTracker functionality works different than for the other series like a line or scatter.
My idea to achieve the wanted result is rendering dummy/transparent rectangles which will trigger the tooltip on mouseover effect.
Demo: https://jsfiddle.net/BlackLabel/3pr4baeq/
events: {
render() {
let chart = this;
chart.series.forEach(s => {
s.points.forEach(p => {
if (p.customRect) {
p.customRect.destroy();
}
p.customRect = chart.renderer.rect(p.barX + chart.plotLeft, chart.plotTop, p.pointWidth, p.shapeArgs.y)
.attr({
//fill: 'transparent',
fill: 'yellow'
})
.add();
p.customRect.element.onmouseover = function() {
chart.tooltip.refresh(p)
}
})
})
}
}
You can change the color of the rendered rectangles to the transparent which will hide them.
API: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#rect
API: https://api.highcharts.com/highcharts/chart.events.render