How to add D3 tooltips - d3.js

Question

Currently I am looking in to D3 sample trying to alter it to add tooltips https://plnkr.co/edit/stHnntCknDUs0Xw6MlQ2?p=preview but cant manage it myself.
I want to add tooltip and pointers to this the way like it is done here http://c3js.org/samples/timeseries.html
//Add tooltips
// Define the div for the tooltip
var div = d3.select("body").append("div")
.attr("class", "tooltip")
.style("opacity", 0);
// Add the scatterplot
countryEnter.selectAll("dot")
.data(data)
.enter().append("circle")
.attr("r", 5)
.attr("cx", function(d) { return x(d.date); })
.attr("cy", function(d) { return y(d.stat); })
.on("mouseover", function(d) {
div.transition()
.duration(200)
.style("opacity", .9);
div .html(formatTime(d.date) + "<br/>" + d.date)
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY - 28) + "px");
})
.on("mouseout", function(d) {
div.transition()
.duration(500)
.style("opacity", 0);
});
Just cant get it working

Answer 1

You are putting the hover on the wrong element. You are putting them on the dots (which don't exist as in your data you as you have no date attribute).
What I have done is place them on the path like so :
countryEnter.append("path")
.attr("class", "line")
.attr("d", function(d) { return line(d.values); })
.style("stroke", function(d) { return color(d.name); })
.on("mouseover", function(d) {
console.log(d)
divTooltip.transition()
.duration(200)
.style("opacity", .9)
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY - 28) + "px")
.innerHTML(formatTime(d.date) + "<br/>" + d.close)
})
.on("mouseout", function(d) {
divTooltip.transition()
.duration(500)
.style("opacity", 0);
});
But I still get the error formatTime is not defined. But the problem is solved on getting the tooltip to be viewed. So solving the rest shouldn't be difficult :)
Updated plunkr : https://plnkr.co/edit/zQY0Wen1plIMuwOMq3PE?p=preview