fixed scatterplot tooltips

Author: cklplanet

js/script.js

@@ -681,15 +681,42 @@ document.addEventListener("DOMContentLoaded", function () {
       .nice()
       .range([height - margin.bottom, margin.top]);
 
+    container
+      .style("position", "relative")
+      .style("overflow", "visible");
+
     const tooltip = container.append("div")
+      .attr("class", "snapshot-tooltip")
       .style("position", "absolute")
       .style("opacity", 0)
       .style("pointer-events", "none")
-      .style("background", "rgba(33,37,41,0.92)")
+      .style("background", "rgba(33,37,41,0.94)")
       .style("color", "#fff")
       .style("padding", "0.8rem 1.1rem")
       .style("border-radius", "6px")
-      .style("font-size", "1.3rem");
+      .style("font-size", "1.2rem")
+      .style("line-height", "1.35")
+      .style("z-index", 9999)
+      .style("box-shadow", "0 8px 20px rgba(0,0,0,0.18)");
+    
+    function showTooltip(event, d, labelOverride = null) {
+      const [mx, my] = d3.pointer(event, container.node());
+
+      tooltip
+        .style("opacity", 1)
+        .style("left", `${mx + 18}px`)
+        .style("top", `${my + 14}px`)
+        .html(`
+          <strong>${d.country}</strong><br>
+          ${labelOverride || niceGroupLabel(d.group)}<br>
+          GDP per capita: ${formatValue(d.gdp)}<br>
+          Internet users: ${formatValue(d.internet)}%
+        `);
+    }
+
+    function hideTooltip() {
+      tooltip.style("opacity", 0);
+    }
 
     svg.append("g")
       .attr("transform", `translate(0,${height - margin.bottom})`)
@@ -714,17 +741,24 @@ document.addEventListener("DOMContentLoaded", function () {
       .attr("opacity", 0.72)
       .attr("stroke", "#fff")
       .attr("stroke-width", 1)
+      .on("mouseenter", function (event, d) {
+        d3.select(this)
+          .attr("stroke", "#111")
+          .attr("stroke-width", 2)
+          .attr("r", 7.2);
+
+        showTooltip(event, d);
+      })
       .on("mousemove", function (event, d) {
-        tooltip
-          .style("opacity", 1)
-          .style("left", `${event.offsetX + 20}px`)
-          .style("top", `${event.offsetY + 12}px`)
-          .html(
-            `<strong>${d.country}</strong><br>${niceGroupLabel(d.group)}<br>GDP per capita: ${formatValue(d.gdp)}<br>Internet users: ${formatValue(d.internet)}%`
-          );
+        showTooltip(event, d);
       })
-      .on("mouseout", function () {
-        tooltip.style("opacity", 0);
+      .on("mouseleave", function () {
+        d3.select(this)
+          .attr("stroke", "#fff")
+          .attr("stroke-width", 1)
+          .attr("r", 5.8);
+
+        hideTooltip();
       });
 
     svg.append("g")
@@ -741,17 +775,22 @@ document.addEventListener("DOMContentLoaded", function () {
       .attr("stroke", "#111")
       .attr("stroke-width", 2.2)
       .raise()
+      .on("mouseenter", function (event, d) {
+        d3.select(this)
+          .attr("r", 12)
+          .attr("stroke-width", 3);
+
+        showTooltip(event, d, "China (Source Country)");
+      })
       .on("mousemove", function (event, d) {
-        tooltip
-          .style("opacity", 1)
-          .style("left", `${event.offsetX + 20}px`)
-          .style("top", `${event.offsetY + 12}px`)
-          .html(
-            `<strong>${d.country}</strong><br>China (Source Country)<br>GDP per capita: ${formatValue(d.gdp)}<br>Internet users: ${formatValue(d.internet)}%`
-          );
+        showTooltip(event, d, "China (Source Country)");
       })
-      .on("mouseout", function () {
-        tooltip.style("opacity", 0);
+      .on("mouseleave", function () {
+        d3.select(this)
+          .attr("r", 10)
+          .attr("stroke-width", 2.2);
+
+        hideTooltip();
       });
 
     const legend = svg.append("g")