From 15152714fd244ec768571d6854774e663fe6bbfe Mon Sep 17 00:00:00 2001
From: Gronod <gordon@i3omb.com>
Date: Sun, 17 May 2026 22:55:52 +0100
Subject: [PATCH] fix: use data-tooltip CSS popup for hide-upgrade-failures
 checkbox, matching episode tooltip style

---
 public/index.html |  2 +-
 public/style.css  | 19 +++++++++++++++++++
 2 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/public/index.html b/public/index.html
index 7eeb1fb..f50f3f5 100644
--- a/public/index.html
+++ b/public/index.html
@@ -98,7 +98,7 @@
                                 <input type="number" id="history-days" class="history-days-input" value="7" min="1" max="90">
                                 <span class="history-days-label">days</span>
                                 <button id="history-refresh-btn" class="history-refresh-btn" title="Refresh history">&#8635;</button>
-                                <label class="history-toggle-label" id="ignore-available-label" title="Hide failed downloads where the item is already available on disk (i.e. a failed upgrade attempt)">
+                                <label class="history-toggle-label" id="ignore-available-label" data-tooltip="Hide failed downloads where the item is already available on disk (i.e. a failed upgrade attempt)">
                                     <input type="checkbox" id="ignore-available-toggle">
                                     <span>Hide upgrade failures</span>
                                 </label>
diff --git a/public/style.css b/public/style.css
index 8aeae00..fb42cb2 100644
--- a/public/style.css
+++ b/public/style.css
@@ -723,6 +723,25 @@ body {
   cursor: pointer;
   user-select: none;
   margin-left: 4px;
+  position: relative;
+}
+
+.history-toggle-label[data-tooltip]:hover::after {
+  content: attr(data-tooltip);
+  position: absolute;
+  left: 0;
+  top: calc(100% + 6px);
+  z-index: 20;
+  background: var(--surface);
+  color: var(--text-primary);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  padding: 8px 10px;
+  font-size: 0.75rem;
+  white-space: pre-line;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+  max-width: 280px;
+  pointer-events: none;
 }
 
 .history-toggle-label input[type="checkbox"] {