Tooltip in D3

tooltip.js

function addTooltip(svg, popHeight, popWidth, popx, popy, data) {
  // Define the line
  var valueline = d3.svg.line()
    .x(function(d) { return popx(d.date); })
    .y(function(d) { return 0; });
  var lineSvg = svg.append("g");
  var focus = svg.append("g")
    .style("display", "none");
  lineSvg.append("path")
    .attr("class", "line")
    .attr("d", valueline(data));
  // append the rectangle to capture mouse
  svg.append("rect")
    .attr("width", popWidth)
    .attr("height", popHeight)
    .style("fill", "none")
    .style("pointer-events", "all")
    .on("mouseover", function() { focus.style("display", null); })
    .on("mouseout", function() { focus.style("display", "none"); })
    .on("mousemove", mousemove);
  
  var bisectDate = d3.bisector(function(d) { return d.date; }).left
  
  function mousemove() {
    var x0 = popx.invert(d3.mouse(this)[0]),
      i = bisectDate(data, x0, 1),
      d0 = data[i - 1],
      d1 = data[i],
      d = x0 - d0.date > d1.date - x0 ? d1 : d0;
    focus.select("text.y1")
      .attr("transform", "translate(" + popx(d.date) + "," + popy(d.population) + ")")
      .text(d.population);
    focus.select("text.y2")
      .attr("transform", "translate(" + popx(d.date) + "," + popy(d.population) + ")")
      .text(d.population);
    focus.select("text.y3")
      .attr("transform", "translate(" + popx(d.date) + "," + popy(d.population) + ")")
      .text(formatDate(d.date));
    focus.select("text.y4")
      .attr("transform", "translate(" + popx(d.date) + "," + popy(d.population) + ")")
      .text(formatDate(d.date));
    focus.select(".x")
      .attr("transform", "translate(" + popx(d.date) + "," + popy(d.population) + ")")
      .attr("y2", popHeight - popy(d.population));
    focus.select(".y")
      .attr("transform", "translate(" + popWidth * -1 + "," + popy(d.population) + ")")
      .attr("x2", popWidth + popWidth);
  }
  
  var formatDate = d3.time.format("%d-%b");
  
  // append the x line
  focus.append("line")
    .attr("class", "x")
    .style("stroke", "blue")
    .style("stroke-dasharray", "3,3")
    .style("opacity", 0.5)
    .attr("y1", 0)
    .attr("y2", popHeight);

  // append the y line
  focus.append("line")
    .attr("class", "y")
    .style("stroke", "blue")
    .style("stroke-dasharray", "3,3")
    .style("opacity", 0.5)
    .attr("x1", popWidth)
    .attr("x2", popWidth);

  // place the value at the intersection
  focus.append("text")
    .attr("class", "y1")
    .style("stroke", "white")
    .style("stroke-width", "3.5px")
    .style("opacity", 0.8)
    .attr("dx", 8)
    .attr("dy", "-.3em");
  focus.append("text")
    .attr("class", "y2")
    .attr("dx", 8)
    .attr("dy", "-.3em");

  // place the date at the intersection
  focus.append("text")
    .attr("class", "y3")
    .style("stroke", "white")
    .style("stroke-width", "3.5px")
    .style("opacity", 0.8)
    .attr("dx", 8)
    .attr("dy", "1em");
  focus.append("text")
    .attr("class", "y4")
    .attr("dx", 8)
    .attr("dy", "1em");
}