JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/stock/modules/exporting.js"></script>


<div id="container" style="height: 500px; min-width: 500px"></div>

JavaScript

var candleChart = {

  chartVar: null,
  SVGElements: {},
  loadedData: {
    'AAPL': {
      'text': 'I want to display this text inside the new tooltip'
    },
    'Volume': {
      'text': 'Another text'
    }
  },

  getItemsDescription: function(serieName) {

    return this.loadedData[serieName].text;
  },

  buildTooltip: function(text, coord) {

    // we've to check if exists and remove it
    try {
      this.SVGElements.destroy();
    } catch (e) {
      // nothing
    }

    try {

      // first of all we've to build a group to put the elements
      this.SVGElements = this.chartVar.renderer.g().attr({
        'zIndex': 11
      }).add();

      // build tooltip text
      var textContainer = this.chartVar.renderer.text(text, coord[0], coord[1])
        .attr({
          'zIndex': 10
        })
        .add(this.SVGElements);

      // get text 'box'
      var box = textContainer.getBBox();

      // build  tooltip square according to the text location, then place the container behind the text
      this.chartVar.renderer.rect(box.x - 5, box.y - 5, box.width + 10, box.height + 10, 5)
        .attr({
          'stroke-width': 2, // border width
          'stroke': '#a8a8a8', // border color
          'zIndex': 9,
          'fill': 'white', // background color
          'fill-opacity': 0.85, // background opacity
          'isShadow': true
        })
        .add(this.SVGElements);
    } catch (e) {
      return false;
    }
  }

};

jQuery('#container .highcharts-legend text').live("mouseover", function(e) {

    // graphic position
    var coord = new Array(e.clientX, e.clientY - 40),
      serieName = jQuery(this).children('tspan').text();

    // get legend items
    var text = candleChart.getItemsDescription(serieName);

    candleChart.buildTooltip(text, coord);


  })
  .live("mouseout", function() {

    try {
      candleChart.SVGElements.hide();
    } catch (e) {
      // do nothing
    }

  });

$(function() {
 ...