From dcd2ec0a102769c0a7f66a27aad75f5e08788336 Mon Sep 17 00:00:00 2001
From: you <you@example.com>
Date: Sun, 22 Mar 2026 00:15:33 +0000
Subject: [PATCH] fix: sort help uses CSS tooltip instead of title attribute

Native title tooltips are unreliable (delayed, sometimes not shown).
Replaced with CSS ::after pseudo-element tooltip using data-tip attr.
Shows immediately on hover with proper formatting.
---
 public/index.html |  4 ++--
 public/packets.js |  2 +-
 public/style.css  | 10 +++++++++-
 3 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/public/index.html b/public/index.html
index 5ba69041..d97581f1 100644
--- a/public/index.html
+++ b/public/index.html
@@ -22,7 +22,7 @@
   <meta name="twitter:title" content="MeshCore Analyzer">
   <meta name="twitter:description" content="Real-time MeshCore LoRa mesh network analyzer — live packet visualization, node tracking, channel decryption, and route analysis.">
   <meta name="twitter:image" content="https://raw.githubusercontent.com/Kpa-clawbot/meshcore-analyzer/master/public/og-image.png">
-  <link rel="stylesheet" href="style.css?v=1774138080">
+  <link rel="stylesheet" href="style.css?v=1774138533">
   <link rel="stylesheet" href="home.css">
   <link rel="stylesheet" href="live.css?v=1774058575">
   <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
@@ -84,7 +84,7 @@
   <script src="hop-resolver.js?v=1774126708"></script>
   <script src="app.js?v=1774126708"></script>
   <script src="home.js?v=1774042199"></script>
-  <script src="packets.js?v=1774138383"></script>
+  <script src="packets.js?v=1774138533"></script>
   <script src="map.js?v=1774126708" onerror="console.error('Failed to load:', this.src)"></script>
   <script src="channels.js?v=1774331200" onerror="console.error('Failed to load:', this.src)"></script>
   <script src="nodes.js?v=1774126708" onerror="console.error('Failed to load:', this.src)"></script>
diff --git a/public/packets.js b/public/packets.js
index 129a58ea..2cbe5462 100644
--- a/public/packets.js
+++ b/public/packets.js
@@ -504,7 +504,7 @@
     const obsSortSel = document.getElementById('fObsSort');
     obsSortSel.value = obsSortMode;
     const sortHelpEl = document.getElementById('sortHelpIcon');
-    if (sortHelpEl) sortHelpEl.title = "Sort controls how observations are ordered within packet groups and which observation appears in the header row.\n\nObserver — Groups by observer station, earliest first.\nPath \u2191 — Shortest paths first.\nPath \u2193 — Longest paths first.\nTime \u2191 — Earliest observation first.\nTime \u2193 — Most recent first.";
+    if (sortHelpEl) sortHelpEl.setAttribute('data-tip', "Sort controls how observations are ordered within packet groups and which observation appears in the header row.\n\nObserver — Groups by observer station, earliest first.\nPath ↑ — Shortest paths first.\nPath ↓ — Longest paths first.\nTime ↑ — Earliest observation first.\nTime ↓ — Most recent first.");
     obsSortSel.addEventListener('change', async function () {
       obsSortMode = this.value;
       localStorage.setItem('meshcore-obs-sort', obsSortMode);
diff --git a/public/style.css b/public/style.css
index 5d95ee61..300d6cb5 100644
--- a/public/style.css
+++ b/public/style.css
@@ -201,7 +201,15 @@ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible
 }
 .filter-group { display: flex; gap: 6px; align-items: center; }
 .filter-group + .filter-group { border-left: 1px solid var(--border); padding-left: 12px; margin-left: 6px; }
-.sort-help { cursor: help; font-size: 14px; color: var(--text-muted, #888); }
+.sort-help { cursor: help; font-size: 14px; color: var(--text-muted, #888); position: relative; }
+.sort-help:hover::after {
+  content: attr(data-tip);
+  position: absolute; bottom: 130%; left: 50%; transform: translateX(-50%);
+  background: var(--card-bg, #222); color: var(--text, #eee); border: 1px solid var(--border);
+  border-radius: 6px; padding: 8px 12px; font-size: 12px; line-height: 1.5;
+  white-space: pre-line; width: 260px; z-index: 100;
+  box-shadow: 0 4px 12px rgba(0,0,0,.3); pointer-events: none;
+}
 .filter-bar .btn:hover { background: var(--row-hover); }
 .filter-bar .btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }