JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://people.iola.dk/olau/flot/jquery.flot.js"></script>
    <div id="placeholder" style="width:600px;height:300px"></div>

JavaScript

$(function () {
    var sin = [], cos = [];
    for (var i = 0; i < 14; i += 0.5) {
        sin.push([i, Math.sin(i), 'some custom label ' + i]);
        cos.push([i, Math.cos(i), 'another custom label ' + i]);
    }

    var plot = $.plot($("#placeholder"),
           [ 
               { data: sin, label: "sin(x)"}, 
               { data: cos, label: "cos(x)" } 
           ], {
               series: {
                   lines: { show: true },
                   points: { show: true }
               },
               grid: { hoverable: true, clickable: true },
               yaxis: { min: -1.2, max: 1.2 }
             });

    $("#placeholder").bind("plothover", function (event, pos, item) {
        $("#tooltip").remove();
        if (item) {
            var tooltip = item.series.data[item.dataIndex][2];
            
            $('<div id="tooltip">' + tooltip + '</div>')
                .css({
                    position: 'absolute',
                    display: 'none',
                    top: item.pageY + 5,
                    left: item.pageX + 5,
                    border: '1px solid #fdd',
                    padding: '2px',
                    'background-color': '#fee',
                    opacity: 0.80 })
                .appendTo("body").fadeIn(200);

            
            showTooltip(item.pageX, item.pageY, tooltip);
        }
    });

});