JSFiddle - React, Tailwind, and code Playground

by Al Kasih

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>
<div id="tooltip" class="thetooltip">
    <p id="tooltiptext" style="margin:0">default</p>
</div>

CSS

.thetooltip {
    border: 1px solid #2f7ed8;
    background-color: #fff;
    opacity: 0.8500000000000001;
    padding: 4px 12px;
    border-radius: 3px;
    position: absolute;
    top:100px;
    box-shadow: 1px 1px 3px #666;
}

JavaScript

$(function () {
    var $tooltip = $('#tooltip');
    $tooltip.hide();
    var $text = $('#tooltiptext');
    displayTooltip = function (text, left) {
        $text.text(text);
        $tooltip.show();
        $tooltip.css('left', parseInt(left) + 24 + 'px');
    };
    var timer;
    hideTooltip = function (e) {
        clearTimeout(timer);
        timer = setTimeout(function () {
            $tooltip.fadeOut();
        }, 5000);
    };
    $.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=usdeur.json&callback=?', function (data) {
        // Create the chart
        chart = new Highcharts.StockChart({
            chart: {
                renderTo: 'container',
                events: {
                    load: function () {
                        displayTooltip(this.xAxis[0].options.plotLines[0].tooltipText,
                                      this.xAxis[0].plotLinesAndBands[0].svgElem.d.split(' ')[1]);
                    }
                }
            },
            rangeSelector: {
                selected: 1
            },

            title: {
                text: 'USD to EUR exchange rate'
            },
            xAxis: {
                plotLines: [{
                    tooltipText: 'hello',
                    value: Date.UTC(2011, 2, 28, 0, 1, 1),
                    color: '#ff6666',
                    dashStyle: 'solid',
                    width: 3,
                    events: {
                        mouseover: function (e) {
                            displayTooltip(this.options.tooltipText, this.svgElem.d.split(' ')[1]);
                        },
                        mouseout: hideTooltip
                    }
                }, {
                    tooltipText: 'test',
                    value: Date.UTC(2011, 2, 27),
                    color: '#ff6666',
                    dashStyle: 'solid',
                    width: 3,
                    events: {
                        mouseover: function (e) {
       ...