D3.js, DC.js tooltips - Issue with gridlines

Question

I'm using the following code in a series chart renderlet to get a D3 tooltip.

  lines.on('renderlet', function(chart) {
    chart.selectAll('g.x text')
      .attr('transform', 'translate(-29,30) rotate(315)')
    chart.selectAll('circle')
      .on("mouseover", function(d) {
        d3.select(this)
          .transition()
          .duration(500)
        div.transition()
          .duration(200)
          .style("opacity", 0.9);
        div.html("<table><thead><tr><th colspan='2' class='toolHead'>" + d.data.key[1] +
            '</th></tr></thead><tbody>' + '<tr style="margin-top: 100px"><td class="toolHeadCol"><td colspan="2">' +
            d.data.key[0] + '</td></tr>' + '<tr style="margin-top: 100px"><td class="toolHeadCol"><b>' + 'value: ' +
            '</b></td> <td>' + d.y + '</td></tr></tbody></table>')
          .style("left", (d3.event.pageX) + "px")
          .style("top", (d3.event.pageY - 28) + "px");
      })
      .on("mouseout", function() {
        d3.select(this)
          .transition()
          .duration(500)
          .style('opacity', 0)
        div.transition()
          .duration(500)
          .style("opacity", 0)
      })

When hovered on a certain data point in line, tooltip gets displayed. Data point on the line(circle) acts as expected, but there are some problems with the corresponding horizontal and vertical grid lines.

1. They do not disappear on mouseout and stay until another circle is hovered upon.
2. Since its a series chart, there are multiple lines, and mouseover on a datapoint in one line does not seem to be affected by mouseover on another line. As shown in the below image:

As shown in image, the gridline on the blue line remains visible even when its is hovered up on orange line.

How do I fix these?

Here is the fiddle