Currently, I have a D3js line chart with SVG circles added to the points. When users hover over these circles, they can see a tooltip.
https://i.sstatic.net/kYpeg.png https://jsfiddle.net/jhynag08/38/
However, I would like the tooltip to appear when users are in close proximity to the circle, maybe within a range of 5-10px. One approach could be adding a background rectangle (full width and height) and implementing something like this: https://jsfiddle.net/53aLmt7r/1/
svg.append("rect")
.attr("class", "overlay")
.attr("width", width)
.attr("height", height)
.on("mouseover", function() {
focus.style("display", null);
})
.on("mouseout", function() {
focus.style("display", "none");
})
.on("mousemove", mousemove);
However, since there is also a bar chart inside the line chart, using this method prevents getting tooltips from the bars when hovering over them.
Is there a way to create an "active area" around the line chart where hover events work without affecting the bar chart's tooltips?