From 8cd3c03702648290681b36a672b33ba037361554 Mon Sep 17 00:00:00 2001
From: Mike Cao <mike@umami.is>
Date: Sun, 8 Feb 2026 00:04:13 -0800
Subject: [PATCH] Added opacity to tooltips.

---
 src/components/charts/ChartTooltip.tsx   | 2 +-
 src/components/metrics/WeeklyTraffic.tsx | 2 +-
 src/components/metrics/WorldMap.tsx      | 7 ++++++-
 3 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/components/charts/ChartTooltip.tsx b/src/components/charts/ChartTooltip.tsx
index ea4a116d0..ac1e52e7b 100644
--- a/src/components/charts/ChartTooltip.tsx
+++ b/src/components/charts/ChartTooltip.tsx
@@ -14,10 +14,10 @@ export function ChartTooltip({
     <FloatingTooltip>
       <Column
         gap="3"
-        backgroundColor="surface-inverted"
         color="inverted"
         padding="4"
         borderRadius="md"
+        style={{ backgroundColor: 'rgba(0,0,0,0.8)' }}
       >
         {title}
         <Row alignItems="center">
diff --git a/src/components/metrics/WeeklyTraffic.tsx b/src/components/metrics/WeeklyTraffic.tsx
index c1c58ee82..7a3b51dfb 100644
--- a/src/components/metrics/WeeklyTraffic.tsx
+++ b/src/components/metrics/WeeklyTraffic.tsx
@@ -95,7 +95,7 @@ export function WeeklyTraffic({ websiteId }: { websiteId: string }) {
                             />
                           </Row>
                         </Focusable>
-                        <Tooltip placement="right">
+                        <Tooltip placement="right" style={{ backgroundColor: 'rgba(0,0,0,0.8)' }}>
                           <Text size="base">{`${t(labels.visitors)}: ${count}`}</Text>
                         </Tooltip>
                       </TooltipTrigger>
diff --git a/src/components/metrics/WorldMap.tsx b/src/components/metrics/WorldMap.tsx
index f0df71487..646903068 100644
--- a/src/components/metrics/WorldMap.tsx
+++ b/src/components/metrics/WorldMap.tsx
@@ -101,7 +101,12 @@ export function WorldMap({ websiteId, data, ...props }: WorldMapProps) {
       </ComposableMap>
       {tooltip && (
         <FloatingTooltip>
-          <Box backgroundColor="surface-inverted" color="inverted" padding borderRadius="md">
+          <Box
+            style={{ backgroundColor: 'rgba(0,0,0,0.8)' }}
+            color="inverted"
+            padding
+            borderRadius="md"
+          >
             {tooltip}
           </Box>
         </FloatingTooltip>