From a86013e552aa96c7ab34f2448d4fcb3b8ebeb000 Mon Sep 17 00:00:00 2001
From: Christian Semmler <mail@csemmler.com>
Date: Sun, 1 Feb 2026 15:48:27 -0800
Subject: [PATCH] Extract EditorTooltip component for consistent tooltip
 positioning

Refactored tooltip markup into reusable EditorTooltip component used by
both ScoreCube and VehicleEditor. Tooltip now consistently appears in
top right corner of the editor section.
---
 src/lib/EditorTooltip.svelte             | 32 ++++++++++++++
 src/lib/save-editor/ScoreCube.svelte     | 55 ++++++++++--------------
 src/lib/save-editor/VehicleEditor.svelte | 22 ++--------
 3 files changed, 58 insertions(+), 51 deletions(-)
 create mode 100644 src/lib/EditorTooltip.svelte

diff --git a/src/lib/EditorTooltip.svelte b/src/lib/EditorTooltip.svelte
new file mode 100644
index 0000000..c178b3d
--- /dev/null
+++ b/src/lib/EditorTooltip.svelte
@@ -0,0 +1,32 @@
+<script>
+    export let text = '';
+</script>
+
+<div class="editor-tooltip-wrapper">
+    <span class="tooltip-trigger">?
+        <span class="tooltip-content">{text}</span>
+    </span>
+    <div class="editor-tooltip-content">
+        <slot />
+    </div>
+</div>
+
+<style>
+    .editor-tooltip-wrapper {
+        position: relative;
+        width: 100%;
+    }
+
+    .tooltip-trigger {
+        position: absolute;
+        top: 0;
+        right: 0;
+        z-index: 1;
+    }
+
+    .editor-tooltip-content {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+</style>
diff --git a/src/lib/save-editor/ScoreCube.svelte b/src/lib/save-editor/ScoreCube.svelte
index 9f12186..e1ba26c 100644
--- a/src/lib/save-editor/ScoreCube.svelte
+++ b/src/lib/save-editor/ScoreCube.svelte
@@ -2,6 +2,7 @@
     import { onMount, onDestroy } from 'svelte';
     import { ScoreCubeRenderer } from '../../core/rendering/ScoreCubeRenderer.js';
     import { WdbParser, findRoi } from '../../core/formats/WdbParser.js';
+    import EditorTooltip from '../EditorTooltip.svelte';
 
     export let missions = {};
     export let onUpdate = () => {};
@@ -120,44 +121,34 @@
     }
 </script>
 
-<div class="score-cube-container">
-    <div class="score-cube-header">
-        <span class="tooltip-trigger">?
-            <span class="tooltip-content">Click on the cube to cycle high scores. Changes are automatically saved.</span>
-        </span>
-    </div>
-    <canvas
-        bind:this={canvas}
-        width="200"
-        height="200"
-        onclick={handleClick}
-        class:hidden={loading || error}
-        role="button"
-        tabindex="0"
-        aria-label="Score cube - click to edit scores"
-    ></canvas>
+<EditorTooltip text="Click on the cube to cycle high scores. Changes are automatically saved.">
+    <div class="score-cube-container">
+        <canvas
+            bind:this={canvas}
+            width="200"
+            height="200"
+            onclick={handleClick}
+            class:hidden={loading || error}
+            role="button"
+            tabindex="0"
+            aria-label="Score cube - click to edit scores"
+        ></canvas>
 
-    {#if loading}
-        <div class="overlay">
-            <div class="spinner"></div>
-        </div>
-    {:else if error}
-        <div class="overlay error">Error: {error}</div>
-    {/if}
-</div>
+        {#if loading}
+            <div class="overlay">
+                <div class="spinner"></div>
+            </div>
+        {:else if error}
+            <div class="overlay error">Error: {error}</div>
+        {/if}
+    </div>
+</EditorTooltip>
 
 <style>
     .score-cube-container {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
         position: relative;
         min-width: 0;
-    }
-
-    .score-cube-header {
-        align-self: flex-end;
-        margin-bottom: 4px;
+        margin-top: 16px;
     }
 
     canvas {
diff --git a/src/lib/save-editor/VehicleEditor.svelte b/src/lib/save-editor/VehicleEditor.svelte
index 4ae4651..8861161 100644
--- a/src/lib/save-editor/VehicleEditor.svelte
+++ b/src/lib/save-editor/VehicleEditor.svelte
@@ -11,6 +11,7 @@
     } from '../../core/savegame/constants.js';
     import NavButton from '../NavButton.svelte';
     import ResetButton from '../ResetButton.svelte';
+    import EditorTooltip from '../EditorTooltip.svelte';
 
     export let slot;
     export let onUpdate = () => {};
@@ -180,13 +181,7 @@
 
 </script>
 
-<div class="vehicle-editor">
-    <div class="vehicle-editor-header">
-        <span class="tooltip-trigger">?
-            <span class="tooltip-content">Click on the part to cycle through colors. Changes are automatically saved.</span>
-        </span>
-    </div>
-
+<EditorTooltip text="Click on the part to cycle through colors. Changes are automatically saved.">
     <!-- 3D Preview (clickable to cycle color) -->
     <div class="preview-container">
         <canvas
@@ -226,20 +221,9 @@
             <ResetButton onclick={resetColor} />
         {/if}
     </div>
-</div>
+</EditorTooltip>
 
 <style>
-    .vehicle-editor {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-    }
-
-    .vehicle-editor-header {
-        align-self: flex-end;
-        margin-bottom: 4px;
-    }
-
     .preview-container {
         position: relative;
     }