JSFiddle - React, Tailwind, and code Playground

by b_g_v

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container"></div>

JavaScript

Highcharts.chart("container", {
  chart: {
    events: {
      load: function() {
        const chart = this;
        const yTicks = chart.yAxis[0].ticks;

        chart.customTooltip = chart.renderer.label('custom tooltip', 0, 0, 'callout').attr({
          zIndex: 12,
          fill: '#fff',
          'stroke-width': 1,
          stroke: '#7CB5EC',
          padding: 8,
          r: 6,
        }).add().hide();
		
        Object.values(yTicks).forEach(tick => {
          const label = tick.label;
          console.log(label.getBBox());
		      const labelHeight = label.getBBox().height;

          label.on('mouseover', () => {
            chart.customTooltip.attr({
              text: `custom label: ${label.textStr}`,
              x: label.xy.x + 10,
              y: label.xy.y - labelHeight / 4 - chart.customTooltip.height / 2,
              anchorX: label.xy.x,
              anchorY: label.xy.y - labelHeight / 4
            }).show();
          });
          label.on('mouseout', () => {
            chart.customTooltip.hide();
          });
        });

      }
    }
  },
  series: [{
    data: [1, 2.5, 3, 2, 4]
  }]
});