instant-hover tooltip + always-visible note labels

- replaced SVG <title> tooltips (which use the OS dwell-delay) with an instant custom tooltip rendered in #custom-tooltip - note pins now also render their text inline next to the icon, so a route can be read at a glance without hovering each pin (truncated at 80 chars in the SVG; full text still in the tooltip)
2026-04-25 23:01:43 +02:00
parent e6c457a400
commit 71bef7b8ff
2 changed files with 112 additions and 19 deletions
@@ -373,6 +373,26 @@ body {
 }
 .waypoint-list li button:hover { color: var(--boss); }

+/* --- instant tooltip ------------------------------------------------------ */
+.custom-tooltip {
+  position: fixed;
+  pointer-events: none;
+  z-index: 200;
+  background: rgba(20, 18, 24, 0.96);
+  color: var(--text);
+  border: 1px solid var(--accent);
+  border-radius: 4px;
+  padding: 6px 10px;
+  font-size: 13px;
+  line-height: 1.35;
+  max-width: 360px;
+  box-shadow: 0 6px 18px rgba(0, 0, 0, .45);
+  opacity: 0;
+  transition: opacity .08s ease;
+  white-space: pre-wrap;
+}
+.custom-tooltip.show { opacity: 1; }
+
 /* --- toast ---------------------------------------------------------------- */
 .toast {
  position: fixed;