From 7c683819a2d56d400bd7fc924fd95db81bfb65e5 Mon Sep 17 00:00:00 2001
From: Luc Mcgrady <lucmcgrady@gmail.com>
Date: Wed, 12 Nov 2025 18:20:45 +0000
Subject: [PATCH] Added: Tooltip fade

---
 ts/routes/reviewer/Reviewer.svelte | 4 +++-
 ts/routes/reviewer/reviewer.ts     | 4 +++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/ts/routes/reviewer/Reviewer.svelte b/ts/routes/reviewer/Reviewer.svelte
index 7ccd5b934..9504c8c2e 100644
--- a/ts/routes/reviewer/Reviewer.svelte
+++ b/ts/routes/reviewer/Reviewer.svelte
@@ -13,6 +13,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         state.registerShortcuts();
     }
     $: tooltipMessage = state.tooltipMessage;
+    $: tooltipShown = state.tooltipShown;
 </script>
 
 <div class="iframe-container">
@@ -24,7 +25,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         sandbox="allow-scripts"
     ></iframe>
 
-    <div class="tooltip" style:opacity={$tooltipMessage ? 1 : 0}>
+    <div class="tooltip" style:opacity={$tooltipShown ? 1 : 0}>
         {$tooltipMessage}
     </div>
 </div>
@@ -44,6 +45,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         z-index: var(--bs-tooltip-z-index);
         border: 2px solid white;
         opacity: 1;
+        transition: opacity 0.3s;
     }
 
     iframe {
diff --git a/ts/routes/reviewer/reviewer.ts b/ts/routes/reviewer/reviewer.ts
index fcd2d8f1b..64112026e 100644
--- a/ts/routes/reviewer/reviewer.ts
+++ b/ts/routes/reviewer/reviewer.ts
@@ -58,6 +58,7 @@ export class ReviewerState {
     readonly answerButtons = derived(this.cardData, ($cardData) => $cardData?.answerButtons ?? []);
     tooltipMessageTimeout: ReturnType<typeof setTimeout> | undefined;
     readonly tooltipMessage = writable("");
+    readonly tooltipShown = writable(false);
 
     iframe: HTMLIFrameElement | undefined = undefined;
 
@@ -151,8 +152,9 @@ export class ReviewerState {
     public showTooltip(message: string) {
         clearTimeout(this.tooltipMessageTimeout);
         this.tooltipMessage.set(message);
+        this.tooltipShown.set(true);
         this.tooltipMessageTimeout = setTimeout(() => {
-            this.tooltipMessage.set("");
+            this.tooltipShown.set(false);
         }, TOOLTIP_TIMEOUT_MS);
     }