Tooltip does not appear for the overlapped circles in d3.js - d3.js

Question

I am creating a scatter Plot in which the points sometimes overlap each other. On mouse-over on any of those points, either the tooltip flickers or sometimes it does not appear. Can any one help me out with this?
dots.on("mouseenter", function(d) {
d3.select(this).attr({
r: radius * 2
});
d3.selectAll(".crosshair")
.style("display", "block");
var xCoord = d3.mouse(this)[0];
var yCoord = d3.mouse(this)[1];
addCrossHair(xCoord, yCoord);
tooltipDiv
.style("top", (d3.event.pageY + 2) + "px")
.style("left", (d3.event.pageX - 28) + "px")
.style("opacity", 0.9)
.style("display", "block")
.html(content);
});
dots.on("mouseout", function(d) {
d3.select(this).attr({
r: radius
});
d3.selectAll(".crosshair")
.style("display", "none");
tooltipDiv.transition()
.duration(100)
.style("display", "none");
});
//tooltip //
var tooltipDiv = d3.select("#scatterChart")
.append("div")
.attr("class", "d3-tip n")
.style("opacity", 0)
.style("position","fixed")
.style("display", "block")
.style("top", 100)
.style("left", 100)
.style("pointer-events","none");
//crossHair//
function addCrossHair(xCoord, yCoord) {
if(!xCoord || !yCoord){ // don't draw cross hair if no valid coordinates given
return;
}
d3.select("#h_crosshair")
.attr("x1", 0)
.attr("y1", yCoord)
.attr("x2", width)
.attr("y2", yCoord)
.style("display", "block");
d3.select("#v_crosshair")
.attr("x1", xCoord)
.attr("y1", 0)
.attr("x2", xCoord)
.attr("y2", height)
.style("display", "block");
}

Answer 1

I got the solution for the above question asked by me.
On mouse-out the duration given to the tooltip was causing the flickering issue.
dots.on("mouseout", function(d) {
d3.select(this).attr({
r: radius
});
d3.selectAll(".crosshair")
.style("display", "none");
tooltipDiv.transition()
.style("display", "none");
});
On removing the duration(100), the above raised issue was solved.