feat(poi): Mouseover-Tooltip für POIs mit Tailwind-Styling ersetzt Popup

- bindPopup entfernt und durch bindTooltip ersetzt
- Tooltip zeigt POI-Details bei Hover
- Tailwind-Klassen sorgen für einheitliches Design (rund, schatten, padding)
- Version auf 1.1.177 erhöht

CHANGELOG.md

@@ -4,6 +4,34 @@ Alle bedeutenden Änderungen an diesem Projekt werden in dieser Datei dokumentie
 
 ---
 
+[1.1.177] – 2025-05-26
+✨ UI-Verbesserung
+POI-Tooltip auf der Karte wird jetzt bei Mouseover angezeigt (nicht mehr per Klick).
+
+Tooltip ist einheitlich gestaltet mit Tailwind CSS:
+
+Abgerundete Ecken (rounded-xl)
+
+Schatten (shadow-lg)
+
+Innenabstände (px-4 py-2)
+
+Blaue Überschrift, graue Beschriftung
+
+Einheitlicher Stil für alle Marker-Tooltips (setupPOIs.js angepasst).
+
+✅ Clean
+Alte bindPopup()-Logik entfernt – kein manuelles Öffnen/Schließen mehr nötig
+
+closePopup() aus mouseout-Handler entfernt
+
+Tooltip verwendet sticky: true, folgt der Maus
+
+🔧 Version
+📦 Version erhöht auf 1.1.177
+
+---
+
 [1.1.176] – 2025-05-26
 🐞 Fixed
 Problem behoben, dass das Modal „POI hinzufügen“ nach erfolgreichem Submit nicht geschlossen wurde und die Meldung „Wird hinzugefügt…“ dauerhaft sichtbar blieb.

config/appVersion.js

@@ -1,2 +1,2 @@
 // /config/appVersion
-export const APP_VERSION = "1.1.177";
+export const APP_VERSION = "1.1.178";

utils/setupPOIs.js

@@ -78,13 +78,21 @@ export const setupPOIs = async (
           });
         }
 
-        marker.bindPopup(`
+        marker.bindTooltip(
-          <div>
+          `
-            <b class="text-xl text-black-700">${poi.description || "Unbekannt"}</b><br>
+  <div class="bg-white text-gray-800 text-sm rounded-xl px-4 py-2 w-56">
-            ${deviceName || "unbekannt"} <br>
+    <div class="font-semibold text-blue-500 mb-1">${poi.description || "Unbekannt"}</div>
-            ${poiTypName}<br>
+    <div class="text-gray-600 text-sm">Gerät: ${deviceName || "unbekannt"}</div>
-          </div>
+    <div class="text-gray-600 text-sm">Typ: ${poiTypName}</div>
-        `);
+  </div>
+  `,
+          {
+            direction: "top",
+            offset: [0, -10],
+            opacity: 0.95,
+            sticky: true,
+          }
+        );
 
         marker.on("mouseover", function () {
           dispatch(setSelectedPoi(poi));
@@ -94,7 +102,7 @@ export const setupPOIs = async (
 
         marker.on("mouseout", function () {
           dispatch(clearSelectedPoi());
-          this.closePopup();
+          //this.closePopup();
         });
 
         marker.on("dragend", (e) => {