From e8b7ea921d2f4c581c3faf6af732ecd8c96f9e84 Mon Sep 17 00:00:00 2001
From: Anton Tranelis <mail@antontranelis.de>
Date: Mon, 13 Oct 2025 11:28:40 +0200
Subject: [PATCH] style tooltips

---
 lib/package.json                              |  2 +-
 .../Map/Subcomponents/AddButton.tsx           |  6 +++
 lib/src/assets/css/tailwind.css               | 10 +++++
 package-lock.json                             | 40 +++++++++++--------
 4 files changed, 41 insertions(+), 17 deletions(-)

diff --git a/lib/package.json b/lib/package.json
index 6cb120b2..8933695e 100644
--- a/lib/package.json
+++ b/lib/package.json
@@ -77,7 +77,7 @@
     "eslint-plugin-react-refresh": "^0.4.18",
     "eslint-plugin-security": "^3.0.1",
     "eslint-plugin-yml": "^1.14.0",
-    "happy-dom": "^16.8.1",
+    "happy-dom": "^20.0.0",
     "postcss": "^8.4.21",
     "prettier": "^3.3.3",
     "react": "^18.3.1",
diff --git a/lib/src/Components/Map/Subcomponents/AddButton.tsx b/lib/src/Components/Map/Subcomponents/AddButton.tsx
index 888d3ed9..dd77bd49 100644
--- a/lib/src/Components/Map/Subcomponents/AddButton.tsx
+++ b/lib/src/Components/Map/Subcomponents/AddButton.tsx
@@ -57,6 +57,12 @@ export default function AddButton({
                       <div
                         className={`tw:tooltip tw:tooltip-left ${isMobile ? 'tw:tooltip-open' : ''}`}
                         data-tip={layer.menuText}
+                        style={
+                          {
+                            '--tooltip-color': layer.menuColor || '#777',
+                            '--tooltip-text-color': '#ffffff',
+                          } as React.CSSProperties
+                        }
                       >
                         <button
                           tabIndex={0}
diff --git a/lib/src/assets/css/tailwind.css b/lib/src/assets/css/tailwind.css
index 409668fc..5632a534 100644
--- a/lib/src/assets/css/tailwind.css
+++ b/lib/src/assets/css/tailwind.css
@@ -77,4 +77,14 @@
 
 .modal-box {
     max-height: calc(100dvh - 2em);
+}
+
+/* Custom tooltip colors for layer-based tooltips */
+.tw\:tooltip[style*='--tooltip-color']::before,
+.tw\:tooltip[style*='--tooltip-color']::after {
+    background-color: rgba(0,0,0,0.67);
+}
+
+.tw\:tooltip[style*='--tooltip-color']::before {
+    color: var(--tooltip-text-color, #ffffff) !important;
 }
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index ba67dc6a..b90d2cc8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -135,7 +135,7 @@
         "eslint-plugin-react-refresh": "^0.4.18",
         "eslint-plugin-security": "^3.0.1",
         "eslint-plugin-yml": "^1.14.0",
-        "happy-dom": "^16.8.1",
+        "happy-dom": "^20.0.0",
         "postcss": "^8.4.21",
         "prettier": "^3.3.3",
         "react": "^18.3.1",
@@ -4659,6 +4659,13 @@
       "integrity": "sha512-zFDAD+tlpf2r4asuHEj0XH6pY6i0g5NeAHPn+15wk3BV6JA69eERFXC1gyGThDkVa1zCyKr5jox1+2LbV/AMLg==",
       "license": "MIT"
     },
+    "node_modules/@types/whatwg-mimetype": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/whatwg-mimetype/-/whatwg-mimetype-3.0.2.tgz",
+      "integrity": "sha512-c2AKvDT8ToxLIOUlN51gTiHXflsfIFisS4pO7pDPoKouJCESkhZnEy623gwP9laCy5lnLDAw1vAzu2vM2YLOrA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/yauzl": {
       "version": "2.10.3",
       "resolved": "https://registry.npmjs.org/@types/yauzl/-/yauzl-2.10.3.tgz",
@@ -9045,17 +9052,28 @@
       "license": "MIT"
     },
     "node_modules/happy-dom": {
-      "version": "16.8.1",
-      "resolved": "https://registry.npmjs.org/happy-dom/-/happy-dom-16.8.1.tgz",
-      "integrity": "sha512-n0QrmT9lD81rbpKsyhnlz3DgnMZlaOkJPpgi746doA+HvaMC79bdWkwjrNnGJRvDrWTI8iOcJiVTJ5CdT/AZRw==",
+      "version": "20.0.0",
+      "resolved": "https://registry.npmjs.org/happy-dom/-/happy-dom-20.0.0.tgz",
+      "integrity": "sha512-GkWnwIFxVGCf2raNrxImLo397RdGhLapj5cT3R2PT7FwL62Ze1DROhzmYW7+J3p9105DYMVenEejEbnq5wA37w==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "webidl-conversions": "^7.0.0",
+        "@types/node": "^20.0.0",
+        "@types/whatwg-mimetype": "^3.0.2",
         "whatwg-mimetype": "^3.0.0"
       },
       "engines": {
-        "node": ">=18.0.0"
+        "node": ">=20.0.0"
+      }
+    },
+    "node_modules/happy-dom/node_modules/@types/node": {
+      "version": "20.19.21",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.19.21.tgz",
+      "integrity": "sha512-CsGG2P3I5y48RPMfprQGfy4JPRZ6csfC3ltBZSRItG3ngggmNY/qs2uZKp4p9VbrpqNNSMzUZNFZKzgOGnd/VA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "undici-types": "~6.21.0"
       }
     },
     "node_modules/has-bigints": {
@@ -16354,16 +16372,6 @@
       "integrity": "sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ==",
       "license": "MIT"
     },
-    "node_modules/webidl-conversions": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-7.0.0.tgz",
-      "integrity": "sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==",
-      "dev": true,
-      "license": "BSD-2-Clause",
-      "engines": {
-        "node": ">=12"
-      }
-    },
     "node_modules/whatwg-mimetype": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-3.0.0.tgz",