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"] {