We are using jquery and hence need to add jquery script

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

To create the linechart with tooltip, first we need two canvas elements, one for line chart and one for tooltip

<div id="wrapper">
    <canvas id="graph" width=300 height=150></canvas>
    <canvas id="tip" width=100 height=25></canvas>
</div>

For design, let’s have some simple design.

 #tip{
background:transparent; 
border:1px solid blue; 
position:absolute; 
left:-200px; top:100px; 
text-align:center;
}

and here is js that finalize the line chart with tooptip.

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 myData =[12,28,18,34,40,80,75];


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

// 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 - 45) + "px";
            tipCanvas.style.top = (dot.y - 25) + "px";
            tipCtx.clearRect(0, 0, tipCanvas.width, tipCanvas.height);          
			tipCtx.lineJoin = "round";
			tipCtx.lineWidth = 5;
            tipCtx.fillText(dot.tip, 50, 15);
            hit = true;
        }
    }
    if (!hit) {
        tipCanvas.style.left = "-200px";
    }
}

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

    for (var i = 0; i < myData.length; i++) {
        if (myData[i] > max) {
            max = myData[i];
        }
    }
    max += 10 - max % 10;
    return max;
}

// Returns the max X value in our data list
function getMaxX() { 
	return myData.length;	
}

// Return the x pixel for a graph point
function getXPixel(val) {   
    return ((graph.width - xPadding) / (getMaxX() + 1)) * val + (xPadding * 1.5);  
}

// Return the y pixel for a graph point
function getYPixel(val) {
    return graph.height - (((graph.height - yPadding) / getMaxY()) * val) - yPadding;
}

graph = document.getElementById("graph");
var c = graph.getContext('2d');

c.lineWidth = 2;
c.strokeStyle = '#333';
c.font = 'italic 8pt sans-serif';
c.textAlign = "center";

// Draw the axises
c.beginPath();
c.moveTo(xPadding, 0);
c.lineTo(xPadding, graph.height - yPadding);
c.lineTo(graph.width, graph.height - yPadding);
c.stroke();

for (var i = 0; i < getMaxY(); i += 10) {
    c.fillText(i, xPadding - 10, getYPixel(i));
}

c.strokeStyle = '#f00';

// Draw the line graph
c.beginPath();
c.moveTo(getXPixel(1), getYPixel(myData[0]));
for (var i = 1; i < myData.length; i++) {
    c.lineTo(getXPixel(i+1), getYPixel(myData[i]));
}
c.stroke();

// Draw the dots
c.fillStyle = '#333';
for (var i = 0; i < myData.length; i++) {
    c.beginPath();
    c.arc(getXPixel(i+1), getYPixel(myData[i]), 4, 0, Math.PI * 2, true);
    c.fill();
}	

Finally this is what we get

Happy Coding 🙂