änderung tooltip

public/css/building.css

@@ -229,3 +229,21 @@ body {
 #popup-title {
   font-weight: bold;
 }
+
+#map-tooltip {
+  position: fixed;
+  pointer-events: none;
+  background: rgba(0, 0, 0, 0.85);
+  color: #fff;
+  padding: 8px 12px;
+  border-radius: 6px;
+  font-size: 14px;
+  display: none;
+  z-index: 9999;
+  max-width: 200px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
+}
+
+#map-tooltip strong {
+  color: #ffd700;
+}

public/js/building.js

@@ -8,10 +8,14 @@ fetch("/api/buildings")
 
       if (!element) return;
 
-      const title = element.querySelector("title");
+      let title = element.querySelector("title");
 
-      if (title) {
-        title.textContent = building.name;
+      // Falls kein title existiert → erstellen
+      if (!title) {
+        title = document.createElementNS("http://www.w3.org/2000/svg", "title");
+        element.prepend(title);
       }
+
+      title.textContent = building.name;
     });
   });

public/js/map-ui.js

@@ -1,5 +1,6 @@
 const popup = document.getElementById("building-popup");
 const title = document.getElementById("popup-title");
+const tooltip = document.getElementById("map-tooltip");
 
 function resetTabs() {
   document
@@ -112,3 +113,32 @@ async function loadBuilding(buildingId) {
     console.error("Fehler beim Laden des Gebäudes:", err);
   }
 }
+
+document.querySelectorAll(".building").forEach((building) => {
+  building.addEventListener("mouseenter", async (e) => {
+    const id = building.dataset.id;
+
+    const res = await fetch("/api/building/" + id);
+    const data = await res.json();
+
+    tooltip.innerHTML = `
+      <strong>${data.name}</strong><br>
+      Level ${data.level}<br>
+      Punkte ${data.points}/${data.nextLevelPoints}<br>
+      <hr>
+      Upgrade Kosten:<br>
+      ${data.upgradeCost}
+    `;
+
+    tooltip.style.display = "block";
+  });
+
+  building.addEventListener("mousemove", (e) => {
+    tooltip.style.left = e.clientX + 15 + "px";
+    tooltip.style.top = e.clientY + 15 + "px";
+  });
+
+  building.addEventListener("mouseleave", () => {
+    tooltip.style.display = "none";
+  });
+});

views/launcher.ejs

@@ -209,5 +209,6 @@
       window.playerName = "<%= character.name %>";
     </script>
     <script src="/js/chat.js"></script>
+    <div id="map-tooltip"></div>
   </body>
 </html>