tooltip works

src/components/BeeswarmChart.vue

@@ -47,7 +47,9 @@
           </span> (like drought or pollution).
         </p>
       </div>
-      <div id="beeswarm-chart-container"></div>
+      <div id="beeswarm-chart-container">
+        <div id="tooltip" style="position: absolute; opacity: 0; background: #f9f9f9; padding: 5px; border: 1px solid #ccc; border-radius: 5px;"></div>
+      </div>
     </section>
   </template>
   
@@ -182,7 +184,18 @@
       .append('circle')
       .attr('class', 'bubble')
       .attr('r', d => radiusScale(d.evidence_val))
-      .style('fill', d => dimensionColors[d.dimension.replace(' ', '')]);
+      .style('fill', d => dimensionColors[d.dimension.replace(' ', '')])
+      .on('mouseover', function (event, d) {
+      const [x, y] = d3.pointer(event);
+      d3.select('#tooltip')
+        .style('opacity', 1)
+        .html(`${d.determinant}<br>Evidence: ${d.evidence_val}`)
+        .style('left', (x + 10) + 'px')
+        .style('top', (y - 28) + 'px');
+    })
+      .on('mouseout', function () {
+        d3.select('#tooltip').style('opacity', 0);
+      });
   
     // Run simulation
     simulation = d3.forceSimulation()