diff --git a/src/lib/ScatterPlot.svelte b/src/lib/ScatterPlot.svelte
index d1eb48d..0f95d64 100644
--- a/src/lib/ScatterPlot.svelte
+++ b/src/lib/ScatterPlot.svelte
@@ -46,12 +46,13 @@
 
   let tooltip_point: PlotPoint
   let hovered = false
+  const bisect = bisector((data_point: PlotPoint) => data_point[0]).right
+
+  // update tooltip on hover element tile
   $: if ($active_element?.number) {
     hovered = true
-    tooltip_point = data_points[$active_element.number]
+    tooltip_point = data_points[$active_element.number - 1]
   }
-  const bisect = bisector((data_point: PlotPoint) => data_point[0]).right
-
   function on_mouse_move(event: MouseEvent) {
     hovered = true
     const mouse_coords = [event.offsetX, event.offsetY]
@@ -68,7 +69,11 @@
 
 <div class="scatter" bind:clientWidth={width} bind:clientHeight={height} {style}>
   {#if width && height}
-    <svg on:mousemove={on_mouse_move} on:mouseleave={() => (hovered = false)}>
+    <svg
+      on:mousemove={on_mouse_move}
+      on:mouseleave={() => (hovered = false)}
+      on:mouseleave
+    >
       <Line
         points={scaled_data.map(([x, y]) => [x, y])}
         origin={[x_scale(xrange[0]), y_scale(yrange[0])]}
diff --git a/src/routes/[slug]/+page.svelte b/src/routes/[slug]/+page.svelte
index 019ddd0..71fa45c 100644
--- a/src/routes/[slug]/+page.svelte
+++ b/src/routes/[slug]/+page.svelte
@@ -46,7 +46,8 @@
 <section>
   <ElementPhoto />
 
-  <ScatterPlot ylim={[0, null]} />
+  <!-- on:mouseleave makes ScatterPlot always show current element unless user actively hovers another element -->
+  <ScatterPlot ylim={[0, null]} on:mouseleave={() => ($active_element = element)} />
 </section>
 
 <section>