I've encountered a strange issue with tooltips using d3-tip in a scatter plot. Initially, the tooltips are not functioning at all, and even the mouseover events are not triggering as expected.
The scatter plot consists of three sets of data on each axis. Oddly enough, when I switch to another set of data, the tooltips start working properly.
Furthermore, reverting back to the original data also makes the tooltips function correctly. You can view the website where this issue is occurring here: .
The tooltip setup looks like this:
// Setting up the tool tip
var tool_tip = d3.tip()
.attr("class", "d3-tip")
.offset([-8, 0])
.html(d => `<strong>${d.state}</strong><br>${optionListXTitle[optionX]}: ${d[optionListX[optionX]]}<br>${optionListYTitle[optionY]}: ${d[optionListY[optionY]]}`);
// Linking the tool tip to the chart
chartGroup.selectAll(".stateCircleTrans").call(tool_tip);
// Setting up event listeners
chartGroup.selectAll(".stateCircleTrans")
.on("mousemove", function (d) { console.log(`d: ${JSON.stringify(d)}`); tool_tip.show(d, this);})
.on("mouseover", function (d) { console.log(`d: ${JSON.stringify(d)}`); tool_tip.show(d, this);})
.on("mouseout", function (d) { tool_tip.hide(d);});
I have tried various recommendations, but none seem to resolve the issue at hand.
Why do the tooltips fail to work initially but start functioning once the data is changed?
Note: I managed to get it working based on advice from others to rearrange the code. Here's the updated section that fixed the problem:
// Adding new circles
transCircles.enter()
.append("circle")
.attr("class", "stateCircleTrans")
.transition(t)
.attr("cx", d => x(d[optionListX[optionX]]))
.attr("cy", y(0));
Essentially, moving the attr("class") for each declaration above the transition resolved the issue.