From 15725e9f8145f30fd5d7fa81a8d1c76ad63830ab Mon Sep 17 00:00:00 2001
From: Claude Dev <claude-dev@aegis-sight.de>
Date: Tue, 24 Mar 2026 12:54:46 +0100
Subject: [PATCH] Mouse-Over Tooltips fuer alle Layer und Visual Modes

Jedes interaktive Element hat einen erklaerenden Tooltip:
- Layer-Checkboxen: Datenquelle, Refresh-Rate, Anzahl
- Layer-Namen: Inhalt und Farbkodierung
- Visual Modes: Erklaerung des Effekts
- Custom CSS-Tooltips passend zum Dark-Theme
---
 static/css/globe.css | 25 +++++++++++++++++++++++++
 static/index.html    | 40 ++++++++++++++++++++--------------------
 2 files changed, 45 insertions(+), 20 deletions(-)

diff --git a/static/css/globe.css b/static/css/globe.css
index beae127..a6247cf 100644
--- a/static/css/globe.css
+++ b/static/css/globe.css
@@ -230,3 +230,28 @@ html, body { height: 100%; overflow: hidden; background: var(--bg-primary); colo
     pointer-events: none;
     z-index: 40;
 }
+
+/* === Tooltip-Styling === */
+.layer-toggle[title]:hover::after,
+.layer-name[title]:hover::after,
+.vmode-btn[title]:hover::after {
+    content: attr(title);
+    position: absolute;
+    left: 110%;
+    top: 50%;
+    transform: translateY(-50%);
+    background: rgba(11, 17, 33, 0.95);
+    border: 1px solid var(--border);
+    border-radius: 4px;
+    padding: 6px 10px;
+    font-size: 10px;
+    color: var(--text);
+    white-space: nowrap;
+    z-index: 200;
+    pointer-events: none;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
+    max-width: 280px;
+    white-space: normal;
+    line-height: 1.4;
+}
+.layer-toggle, .layer-name, .vmode-btn { position: relative; }
diff --git a/static/index.html b/static/index.html
index 274f8e9..ed7cb65 100644
--- a/static/index.html
+++ b/static/index.html
@@ -47,49 +47,49 @@
         <h3 class="panel-title">LAYER</h3>
         <div class="panel-section">
             <label class="layer-toggle">
-                <input type="checkbox" id="layer-flights">
+                <input type="checkbox" id="layer-flights" title="Echtzeit-Flugverkehr weltweit (OpenSky Network, ~7.000 Flugzeuge, 15s Refresh)">
                 <span class="layer-dot dot-flights"></span>
-                <span class="layer-name">Flugverkehr</span>
+                <span class="layer-name" title="~7.000 Flugzeuge weltweit, Position + Hoehe + Geschwindigkeit">Flugverkehr</span>
                 <span class="layer-count" id="count-flights">-</span>
             </label>
             <div class="layer-loading" id="loading-flights"></div>
             <div class="layer-status" id="status-flights"></div>
             <label class="layer-toggle">
-                <input type="checkbox" id="layer-ships">
+                <input type="checkbox" id="layer-ships" title="Echtzeit-Schiffsverkehr weltweit (AISStream AIS-Daten, kontinuierlich)">
                 <span class="layer-dot dot-ships"></span>
-                <span class="layer-name">Schiffsverkehr</span>
+                <span class="layer-name" title="Tausende Schiffe global, MMSI + SOG + COG">Schiffsverkehr</span>
                 <span class="layer-count" id="count-ships">-</span>
             </label>
             <div class="layer-loading" id="loading-ships"></div>
             <div class="layer-status" id="status-ships"></div>
             <label class="layer-toggle">
-                <input type="checkbox" id="layer-quakes">
+                <input type="checkbox" id="layer-quakes" title="Erdbeben M2.5+ der letzten 24h (USGS Earthquake Hazards, 5min Refresh)">
                 <span class="layer-dot dot-quakes"></span>
-                <span class="layer-name">Erdbeben</span>
+                <span class="layer-name" title="Magnitude 2.5+, Farbe nach Alter (rot=frisch, gelb=aelter)">Erdbeben</span>
                 <span class="layer-count" id="count-quakes">-</span>
             </label>
             <div class="layer-loading" id="loading-quakes"></div>
             <div class="layer-status" id="status-quakes"></div>
             <label class="layer-toggle">
-                <input type="checkbox" id="layer-gdelt">
+                <input type="checkbox" id="layer-gdelt" title="Geokodierte Nachrichten der letzten 24h (GDELT Global Event Database)">
                 <span class="layer-dot dot-gdelt"></span>
-                <span class="layer-name">Nachrichten</span>
+                <span class="layer-name" title="Geokodierte News-Events, thematisch zur aktuellen Weltlage">Nachrichten</span>
                 <span class="layer-count" id="count-gdelt">-</span>
             </label>
             <div class="layer-loading" id="loading-gdelt"></div>
             <div class="layer-status" id="status-gdelt"></div>
             <label class="layer-toggle">
-                <input type="checkbox" id="layer-satellites">
+                <input type="checkbox" id="layer-satellites" title="Satelliten-Orbits in Echtzeit (CelesTrak TLE: ISS, GPS, Galileo, Starlink)">
                 <span class="layer-dot dot-satellites"></span>
-                <span class="layer-name">Satelliten</span>
+                <span class="layer-name" title="ISS (rot), GPS (orange), Galileo (blau), Starlink (grau)">Satelliten</span>
                 <span class="layer-count" id="count-satellites">-</span>
             </label>
             <div class="layer-loading" id="loading-satellites"></div>
             <div class="layer-status" id="status-satellites"></div>
             <label class="layer-toggle">
-                <input type="checkbox" id="layer-disasters">
+                <input type="checkbox" id="layer-disasters" title="Aktive Naturkatastrophen (NASA EONET: Waldbraende, Vulkane, Stuerme, Fluten)">
                 <span class="layer-dot dot-disasters"></span>
-                <span class="layer-name">Katastrophen</span>
+                <span class="layer-name" title="Waldbraende, Vulkane, Stuerme, Fluten, Erdrutsche, Eisschmelze">Katastrophen</span>
                 <span class="layer-count" id="count-disasters">-</span>
             </label>
             <div class="layer-loading" id="loading-disasters"></div>
@@ -98,14 +98,14 @@
         <div class="panel-divider"></div>
         <div class="panel-section">
             <label class="layer-toggle">
-                <input type="checkbox" id="layer-daynight">
+                <input type="checkbox" id="layer-daynight" title="Tag/Nacht-Beleuchtung basierend auf aktueller Sonnenposition">
                 <span class="layer-dot dot-daynight"></span>
-                <span class="layer-name">Tag/Nacht</span>
+                <span class="layer-name" title="Sonnenlicht-Simulation zeigt aktuelle Tages-/Nachtseite">Tag/Nacht</span>
             </label>
             <label class="layer-toggle">
-                <input type="checkbox" id="layer-labels" checked>
+                <input type="checkbox" id="layer-labels" title="Laendergrenzen, Staedte und Gewaessernamen (Esri World Boundaries)" checked>
                 <span class="layer-dot dot-labels"></span>
-                <span class="layer-name">Ortsnamen</span>
+                <span class="layer-name" title="Laendergrenzen, Hauptstaedte, Fluesse, Meere">Ortsnamen</span>
             </label>
         </div>
         <div class="panel-divider"></div>
@@ -113,10 +113,10 @@
         <div class="panel-section">
             <div style="font-size:9px;letter-spacing:1.5px;color:var(--accent);margin-bottom:6px;">ANSICHT</div>
             <div style="display:flex;gap:4px;flex-wrap:wrap;">
-                <button class="vmode-btn active" data-mode="standard" onclick="VisualModes.set('standard')">STD</button>
-                <button class="vmode-btn" data-mode="nvg" onclick="VisualModes.set('nvg')">NVG</button>
-                <button class="vmode-btn" data-mode="flir" onclick="VisualModes.set('flir')">FLIR</button>
-                <button class="vmode-btn" data-mode="crt" onclick="VisualModes.set('crt')">CRT</button>
+                <button class="vmode-btn active" data-mode="standard" title="Standard: Photorealistische Darstellung" onclick="VisualModes.set('standard')">STD</button>
+                <button class="vmode-btn" data-mode="nvg" title="Night Vision: Gruener Monochrom-Filter (Nachtsichtgeraet)" onclick="VisualModes.set('nvg')">NVG</button>
+                <button class="vmode-btn" data-mode="flir" title="FLIR Thermal: Infrarot-Darstellung fuer Waermesignaturen" onclick="VisualModes.set('flir')">FLIR</button>
+                <button class="vmode-btn" data-mode="crt" title="CRT Monitor: Retro-Ueberwachungsbildschirm mit Scanlines" onclick="VisualModes.set('crt')">CRT</button>
             </div>
         </div>
         <div class="panel-divider"></div>