Popups per Mouse-Over statt per Klick zu öffnen

components/MapComponent.js

@@ -120,13 +120,32 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
           }),
         }).addTo(map);
 
+        // Popup beim Überfahren mit der Maus öffnen
+        marker.on("mouseover", function (e) {
+          this.openPopup();
+        });
+
+        // Popup schließen, wenn die Maus den Marker verlässt
+        marker.on("mouseout", function (e) {
+          this.closePopup();
+        });
         // Ein Popup mit Informationen zur Station hinzufügen
         marker
           .bindPopup(`<b>${station.LD_Name}</b><br>${station.Device}`)
           .openPopup();
-        marker.bindTooltip(station.LD_Name, {
-          permanent: false,
-          direction: "top",
+        marker.bindTooltip(
+          `<div class="tooltip-content">${station.LD_Name}</div>`,
+          { permanent: false, direction: "top" }
+        );
+        // Zugriff auf das Tooltip-Element und Anwendung von Stilen
+        marker.on("mouseover", () => {
+          document.querySelector(".tooltip-content").style.backgroundColor =
+            "#ffffff";
+          document.querySelector(".tooltip-content").style.padding = "0.5rem";
+          document.querySelector(".tooltip-content").style.borderRadius =
+            "0.25rem";
+          document.querySelector(".tooltip-content").style.border =
+            "1px solid #d1d5db";
         });
       });
     }
@@ -405,10 +424,10 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
         marker.bindPopup(
           `<b>${location.description || "Unbekannt"}</b><br>Type: ${location.idPoiTyp || "N/A"}<br>Lat: ${latitude.toFixed(5)}, Lng: ${longitude.toFixed(5)}`
         );
-        marker.bindTooltip(location.description, {
-          permanent: false,
-          direction: "top",
-        });
+        marker.bindTooltip(
+          `<div class="bg-white text-black p-2 border border-gray-300 rounded shadow">${location.description}</div>`,
+          { permanent: false, direction: "top" }
+        );
 
         marker.on("dragend", function (e) {
           const newLat = e.target.getLatLng().lat;
@@ -666,11 +685,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
   //Informationen in Tooltips einfügen
   // Marker hinzufügen für GisStationsStaticDistrict
   useEffect(() => {
-    if (
-      map &&
-      GisStationsStaticDistrict.length > 0 &&
-      GisStationsStatusDistrict.length > 0
-    ) {
+    if (map && GisStationsStaticDistrict.length > 0) {
       // Zuerst alte Marker entfernen
       map.eachLayer((layer) => {
         if (layer instanceof L.Marker) {
@@ -680,12 +695,6 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
 
       // Neue Marker für jede Station hinzufügen
       GisStationsStaticDistrict.forEach((station) => {
-        // Find corresponding status message
-        const status = GisStationsStatusDistrict.find(
-          (status) => status.IdLD === station.IdLD
-        );
-        const message = status ? status.Me : "Keine Statusmeldung verfügbar";
-
         const marker = L.marker([station.X, station.Y], {
           icon: L.icon({
             iconUrl: getIconPath(station.Icon),
@@ -696,15 +705,25 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
           }),
         }).addTo(map);
 
-        // Ein Popup mit Informationen zur Station und Statusmeldung hinzufügen
-        marker
-          .bindPopup(
-            `<b>${station.LD_Name}</b><br>${station.Device}<br><b>Status:</b> ${message}`
-          )
-          .bindTooltip(`${station.LD_Name} - ${message}`, {
-            permanent: false,
-            direction: "top",
+        // Popup beim Überfahren mit der Maus öffnen
+        marker.on("mouseover", function (e) {
+          this.openPopup();
         });
+
+        // Popup schließen, wenn die Maus den Marker verlässt
+        marker.on("mouseout", function (e) {
+          this.closePopup();
+        });
+        // Ein Popup mit Informationen zur Station hinzufügen
+        marker
+          .bindPopup(`<b>${station.LD_Name}</b><br>${station.Device}`)
+          .openPopup();
+
+        // Diese Zeile entfernt das automatische Tooltip
+        // marker.bindTooltip(station.LD_Name, {
+        //   permanent: false,
+        //   direction: "top",
+        // });
       });
     }
   }, [map, GisStationsStaticDistrict, GisStationsStatusDistrict]); // Include GisStationsStatusDistrict in dependencies

styles/global.css

@@ -1,5 +1,9 @@
+/* styles/global.css */
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-@import 'leaflet/dist/leaflet.css';
+@import "leaflet/dist/leaflet.css";
 
+.tooltip-tailwind .leaflet-tooltip {
+  @apply bg-white text-black p-2 border border-gray-300 rounded shadow !important;
+}