diff --git a/public/css/building.css b/public/css/building.css
index 87addc6..69281c1 100644
--- a/public/css/building.css
+++ b/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;
+}
diff --git a/public/js/building.js b/public/js/building.js
index df3982a..f3f7844 100644
--- a/public/js/building.js
+++ b/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;
});
});
diff --git a/public/js/map-ui.js b/public/js/map-ui.js
index 0914ad4..465d38b 100644
--- a/public/js/map-ui.js
+++ b/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 = `
+ ${data.name}
+ Level ${data.level}
+ Punkte ${data.points}/${data.nextLevelPoints}
+