diff --git a/public/index.html b/public/index.html
index d97581f1..90566421 100644
--- a/public/index.html
+++ b/public/index.html
@@ -22,7 +22,7 @@
-
+
-
+
diff --git a/public/packets.js b/public/packets.js
index 2cbe5462..e725269e 100644
--- a/public/packets.js
+++ b/public/packets.js
@@ -504,7 +504,12 @@
const obsSortSel = document.getElementById('fObsSort');
obsSortSel.value = obsSortMode;
const sortHelpEl = document.getElementById('sortHelpIcon');
- 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.");
+ if (sortHelpEl) {
+ const tip = document.createElement('span');
+ tip.className = 'sort-help-tip';
+ tip.textContent = "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.";
+ sortHelpEl.appendChild(tip);
+ }
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 300d6cb5..abb28fd0 100644
--- a/public/style.css
+++ b/public/style.css
@@ -201,15 +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); position: relative; }
-.sort-help:hover::after {
- content: attr(data-tip);
- position: absolute; bottom: 130%; left: 50%; transform: translateX(-50%);
+.sort-help { cursor: help; font-size: 14px; color: var(--text-muted, #888); position: relative; display: inline-block; }
+.sort-help-tip {
+ display: none; 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;
}
+.sort-help:hover .sort-help-tip { display: block; }
.filter-bar .btn:hover { background: var(--row-hover); }
.filter-bar .btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }