From d3e2421b19c0d35b8e100bb4c0c9b4abeaaf4cae Mon Sep 17 00:00:00 2001
From: cay <cay@joksch.ch>
Date: Sun, 29 Mar 2026 11:23:39 +0100
Subject: [PATCH] sfrjr

---
 public/css/launcher.css | 27 +++++++++++++++++++++++++--
 public/js/map-ui.js     | 18 +++++++++++++++---
 2 files changed, 40 insertions(+), 5 deletions(-)

diff --git a/public/css/launcher.css b/public/css/launcher.css
index b54abf7..83832c4 100644
--- a/public/css/launcher.css
+++ b/public/css/launcher.css
@@ -16,7 +16,7 @@ body {
   width: 2037px;
   height: 1018px;
   flex-shrink: 0;
-  will-change: transform; /* translateZ(0) entfernt – verhindert Zittern */
+  will-change: transform;
 }
 
 .map-image {
@@ -34,7 +34,7 @@ body {
   left: 0;
   width: 100%;
   height: 100%;
-  will-change: transform; /* translateZ(0) entfernt – verhindert Zittern */
+  will-change: transform;
 }
 
 .area {
@@ -51,6 +51,29 @@ body {
   stroke: #6ec6ff;
 }
 
+/* ── Map Tooltip ───────────────────────────────── */
+#map-tooltip {
+  position: fixed;
+  pointer-events: none;
+  background: rgba(0, 0, 0, 0.85);
+  color: #f3e6c5;
+  border: 1px solid #8b6a3c;
+  border-radius: 6px;
+  padding: 8px 12px;
+  font-family: serif;
+  font-size: 13px;
+  display: none;
+  z-index: 9999;
+  max-width: min(220px, calc(100vw - 20px));
+  line-height: 1.6;
+}
+
+#map-tooltip hr {
+  border: none;
+  border-top: 1px solid #8b6a3c;
+  margin: 6px 0;
+}
+
 #game-chat {
   position: fixed;
 
diff --git a/public/js/map-ui.js b/public/js/map-ui.js
index 16cc4ce..070eec6 100644
--- a/public/js/map-ui.js
+++ b/public/js/map-ui.js
@@ -1,4 +1,4 @@
-import { loadCharacterHouse } from "./buildings/character-house.js";
+import { loadCharacterHouse } from "./buildings/character-house.js";
 import { loadBlackmarket } from "./buildings/blackmarket.js";
 import { loadMine } from "./buildings/mine.js";
 const popup = document.getElementById("building-popup");
@@ -185,8 +185,20 @@ document.querySelectorAll(".building").forEach((building) => {
   });
 
   building.addEventListener("mousemove", (e) => {
-    tooltip.style.left = e.clientX + 15 + "px";
-    tooltip.style.top = e.clientY + 15 + "px";
+    // Tooltip erst rendern lassen damit offsetWidth korrekt ist
+    const tw = tooltip.offsetWidth;
+    const th = tooltip.offsetHeight;
+
+    let x = e.clientX + 15;
+    let y = e.clientY + 15;
+
+    // Rechter Rand – Tooltip links vom Cursor anzeigen
+    if (x + tw > window.innerWidth - 10) x = e.clientX - tw - 10;
+    // Unterer Rand – Tooltip über dem Cursor anzeigen
+    if (y + th > window.innerHeight - 10) y = e.clientY - th - 10;
+
+    tooltip.style.left = x + "px";
+    tooltip.style.top  = y + "px";
   });
 
   building.addEventListener("mouseleave", () => {