Added opacity to tooltips.

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

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>

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>