antontranelis/utopia-ui
1
0
Fork 0
mirror of https://github.com/utopia-os/utopia-ui.git synced 2026-03-01 12:44:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

style tooltips

Browse Source
This commit is contained in:
Anton Tranelis 2025-10-13 11:28:40 +02:00
parent 1def41cfa6
commit e8b7ea921d
4 changed files with 41 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
lib/package.json
View File

@ -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",

6
lib/src/Components/Map/Subcomponents/AddButton.tsx
View File

@ -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}

10
lib/src/assets/css/tailwind.css
View File

@ -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;
}

40
package-lock.json generated
View File

@ -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",