JSFiddle - React, Tailwind, and code Playground

by Shestac92

HTML

<script src="https://cdn.anychart.com/js/7.14.3/anychart-bundle.min.js"></script>
<script src="https://cdn.anychart.com/samples-data/resource-charts/bus-schedule/data.js"></script>
<link rel="stylesheet" href="https://cdn.anychart.com/css/7.14.3/anychart-ui.min.css">
<div id="container"></div>
<div id='custom-tooltip'>
    <p>Custom tooltip</p>
    <p id="body"></p>
</div>

CSS

html, body, #container {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
        #custom-tooltip {
            position: absolute;
            pointerEvents: none;
            background-color: darkgray;
            padding: 4px;
            border: solid black 2px;
            display: block;
            z-index: 10000;
        }

JavaScript

anychart.onDocumentReady(function () {
    chart = anychart.resource();
    // The data used in this sample can be obtained from the CDN
    // https://cdn.anychart.com/samples-data/resource-charts/bus-schedule/data.js
    chart.data(data());
    chart.timeTrackingMode('availabilityPerChart')
        .currentStartDate('2016-10-01')
        .pixPerHour(20);

    var activities = chart.activities();
    activities.stroke('#fff');
    activities.labels().padding(10);

    chart.grid()
        .oddHolidayHatchFill('backwardDiagonal', 'green 0.25', '1.5', '15')
        .evenHolidayHatchFill('backwardDiagonal', 'green 0.25', '1.5', '15');

    var resourceList = chart.resourceList();
    resourceList.names({
        fontColor: "#008CC3"
    })
        .types({
            fontColor: "#606166",
            fontSize: 13,
            fontWeight: 700
        })
        .descriptions({
            textWrap: 'byWord',
            fontColor: "#606166",
            fontWeight: 400
        });
    resourceList.descriptions().margin().right(15);

    // Set tags settings.
    resourceList.tags()
        .background('#E5007D')
        .fontColor('#fff')
        .fontSize(12);

    //turn off default tooltips
    chart.tooltip(false);

    //get DOM element of custom tooltip
    var tooltip = document.getElementById('custom-tooltip');
    
    //get point coordinates
    chart.listen("mouseMove", function (e) {
        var clientX = e['offsetX'];
        var clientY = e['offsetY'];
        tooltip.style.left = clientX + 20 + "px";
        tooltip.style.top = clientY + 10 + "px";
    });

    //get pointed activity and show custom tooltip
    chart.listen("mouseOver", function (e) {
        console.log(e.pointIndex);
        if (e.pointIndex == undefined) {
            tooltip.style.display = "none";
        } else {
            document.getElementById('body').innerHTML = "Activity #" + e.pointIndex;
            tooltip.style.display = "block";
        }
    });

    //hide custom...