JSFiddle - React, Tailwind, and code Playground

by m1erickson

HTML

<p>Hover over data-dots for tooltip</p>
<div id="wrapper">
    <canvas id="graph" width=300 height=150></canvas>
    <canvas id="tip" width=100 height=25></canvas>
</div>
<br>
<br>
<input type="text" id="text1" value="text 1" />
<br>
<br>
<input type="text" id="text2" value="text 2" />
<br>
<br>
<input type="text" id="text3" value="text 3" />
<br>
<br>
<input type="text" id="text4" value="text 4" />
<br>
<br>
<input type="text" id="text5" value="text 5" />
<br>
<br>
<input type="text" id="text6" value="text 6" />
<br>
<br>
<input type="text" id="text7" value="text 7" />
<br>
<br>

CSS

body {
    background-color: ivory;
    margin-top:35px;
}
#wrapper {
    position:relative;
    width:300px;
    height:150px;
}
canvas {
    border:1px solid red;
}
#tip {
    background-color:white;
    border:1px solid blue;
    position:absolute;
    left:-200px;
    top:100px;
}

JavaScript

var graph = document.getElementById("graph");
var ctx = graph.getContext("2d");
var tipCanvas = document.getElementById("tip");
var tipCtx = tipCanvas.getContext("2d");

var canvasOffset = $("#graph").offset();
var offsetX = canvasOffset.left;
var offsetY = canvasOffset.top;

var graph;
var xPadding = 30;
var yPadding = 30;

// Notice I changed The X values
var data = {
    values: [{
        X: 0,
        Y: 12
    }, {
        X: 2,
        Y: 28
    }, {
        X: 3,
        Y: 18
    }, {
        X: 4,
        Y: 34
    }, {
        X: 5,
        Y: 40
    }, {
        X: 6,
        Y: 80
    }, {
        X: 7,
        Y: 80
    }]
};

// define tooltips for each data point
var dots = [];
for (var i = 0; i < data.values.length; i++) {
    dots.push({
        x: getXPixel(data.values[i].X),
        y: getYPixel(data.values[i].Y),
        r: 4,
        rXr: 16,
        color: "red",
        tip: "#text" + (i + 1)
    });
}

// request mousemove events
$("#graph").mousemove(function (e) {
    handleMouseMove(e);
});

// show tooltip when mouse hovers over dot
function handleMouseMove(e) {
    mouseX = parseInt(e.clientX - offsetX);
    mouseY = parseInt(e.clientY - offsetY);

    // Put your mousemove stuff here
    var hit = false;
    for (var i = 0; i < dots.length; i++) {
        var dot = dots[i];
        var dx = mouseX - dot.x;
        var dy = mouseY - dot.y;
        if (dx * dx + dy * dy < dot.rXr) {
            tipCanvas.style.left = (dot.x) + "px";
            tipCanvas.style.top = (dot.y - 40) + "px";
            tipCtx.clearRect(0, 0, tipCanvas.width, tipCanvas.height);
            //                  tipCtx.rect(0,0,tipCanvas.width,tipCanvas.height);
            tipCtx.fillText($(dot.tip).val(), 5, 15);
            hit = true;
        }
    }
    if (!hit) {
        tipCanvas.style.left = "-200px";
    }
}


// unchanged code follows

// Returns the max Y value in our data list
function getMaxY() {
    var max = 0;

    for (var i = 0; i <...