JSFiddle - React, Tailwind, and code Playground

by Chitkala More

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 =...