Use FloatingTooltip from zen.

package.json

@@ -195,6 +195,8 @@
       "prisma",
       "sharp"
     ],
-    "overrides": {}
+    "overrides": {
+      "@umami/react-zen": "link:C:/Users/mike/AppData/Local/pnpm/global/5/node_modules/@umami/react-zen"
+    }
   }
 }

pnpm-lock.yaml

@@ -4,6 +4,9 @@ settings:
   autoInstallPeers: true
   excludeLinksFromLockfile: false
 
+overrides:
+  '@umami/react-zen': link:C:/Users/mike/AppData/Local/pnpm/global/5/node_modules/@umami/react-zen
+
 importers:
 
   .:
@@ -45,8 +48,8 @@ importers:
         specifier: ^0.14.0
         version: 0.14.0(@prisma/client@6.4.1(prisma@6.4.1(typescript@5.8.2))(typescript@5.8.2))(@prisma/extension-read-replicas@0.4.0(@prisma/client@6.4.1(prisma@6.4.1(typescript@5.8.2))(typescript@5.8.2)))
       '@umami/react-zen':
-        specifier: ^0.63.0
-        version: 0.63.0(@babel/core@7.26.9)(@types/react@19.0.10)(immer@9.0.21)(use-sync-external-store@1.4.0(react@19.0.0))
+        specifier: link:C:/Users/mike/AppData/Local/pnpm/global/5/node_modules/@umami/react-zen
+        version: link:C:/Users/mike/AppData/Local/pnpm/global/5/node_modules/@umami/react-zen
       '@umami/redis-client':
         specifier: ^0.26.0
         version: 0.26.0
@@ -173,6 +176,9 @@ importers:
       react-window:
         specifier: ^1.8.11
         version: 1.8.11(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      react-zen:
+        specifier: link:C:/Users/mike/AppData/Local/pnpm/global/5/node_modules/@umami/react-zen
+        version: link:C:/Users/mike/AppData/Local/pnpm/global/5/node_modules/@umami/react-zen
       request-ip:
         specifier: ^3.3.0
         version: 3.3.0
@@ -1493,9 +1499,6 @@ packages:
   '@fontsource/inter@4.5.15':
     resolution: {integrity: sha512-FzleM9AxZQK2nqsTDtBiY0PMEVWvnKnuu2i09+p6DHvrHsuucoV2j0tmw+kAT3L4hvsLdAIDv6MdGehsPIdT+Q==}
 
-  '@fontsource/jetbrains-mono@5.2.5':
-    resolution: {integrity: sha512-TPZ9b/uq38RMdrlZZkl0RwN8Ju9JxuqMETrw76pUQFbGtE1QbwQaNsLlnUrACNNBNbd0NZRXiJJSkC8ajPgbew==}
-
   '@formatjs/cli@4.8.4':
     resolution: {integrity: sha512-zZI8QYVl5CHaT6j9OHjS+0mMnWzopBVH0un4n5b4IhIJRzIKnxwFTkxBp5Ifqj6FntrwzIGqP+D6v8u7MPYsmw==}
     hasBin: true
@@ -2937,9 +2940,6 @@ packages:
       '@prisma/client': ^4.8.0
       '@prisma/extension-read-replicas': ^0.3.0
 
-  '@umami/react-zen@0.63.0':
-    resolution: {integrity: sha512-D6oK6p5JFcaEYz7+CEuxZ9/wlPsUlLlNm7NX/7zFXScR3TqkAUgYRBV4cIFHsA7tLSrzR7BvUEA00FcL432Pfw==}
-
   '@umami/redis-client@0.26.0':
     resolution: {integrity: sha512-j2vxb1gYF5zfk7BkrHgau2MwKsB5ijbQh2w1WoIvbP41cqTMsFm/zUrjhZ0cP1ZxR/riQR1AWxKmqNggYRZ5eA==}
 
@@ -6199,11 +6199,6 @@ packages:
     peerDependencies:
       react: ^16.8.0 || ^17 || ^18 || ^19
 
-  react-icons@5.5.0:
-    resolution: {integrity: sha512-MEFcXdkP3dLo8uumGI5xN3lDFNsRtrjbOEKDLD7yv76v4wpnEq2Lt2qeHaQOr34I/wPN3s3+N08WkQ+CW37Xiw==}
-    peerDependencies:
-      react: '*'
-
   react-intl@7.1.6:
     resolution: {integrity: sha512-TgyzN0GJDILl4EIjbBWJddp+zRMx7IrYXeeUBwDisXfuglJaafAUVYYTx9wTWMRJrm2LubaCeH3L68mIPTmUYA==}
     peerDependencies:
@@ -7245,24 +7240,6 @@ packages:
       react:
         optional: true
 
-  zustand@5.0.3:
-    resolution: {integrity: sha512-14fwWQtU3pH4dE0dOpdMiWjddcH+QzKIgk1cl8epwSE7yag43k/AD/m4L6+K7DytAOr9gGBe3/EXj9g7cdostg==}
-    engines: {node: '>=12.20.0'}
-    peerDependencies:
-      '@types/react': '>=18.0.0'
-      immer: '>=9.0.6'
-      react: '>=18.0.0'
-      use-sync-external-store: '>=1.2.0'
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      immer:
-        optional: true
-      react:
-        optional: true
-      use-sync-external-store:
-        optional: true
-
 snapshots:
 
   '@ampproject/remapping@2.3.0':
@@ -8458,8 +8435,6 @@ snapshots:
 
   '@fontsource/inter@4.5.15': {}
 
-  '@fontsource/jetbrains-mono@5.2.5': {}
-
   '@formatjs/cli@4.8.4(ts-jest@29.2.6(@babel/core@7.26.9)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.26.9))(esbuild@0.25.0)(jest@29.7.0(@types/node@22.13.9)(ts-node@10.9.2(@types/node@22.13.9)(typescript@5.8.2)))(typescript@5.8.2))':
     dependencies:
       '@formatjs/icu-messageformat-parser': 2.1.0
@@ -10529,33 +10504,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@umami/react-zen@0.63.0(@babel/core@7.26.9)(@types/react@19.0.10)(immer@9.0.21)(use-sync-external-store@1.4.0(react@19.0.0))':
-    dependencies:
-      '@fontsource/jetbrains-mono': 5.2.5
-      '@react-aria/focus': 3.19.1(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
-      '@react-spring/web': 9.7.5(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
-      classnames: 2.5.1
-      glob: 10.3.10
-      lucide-react: 0.475.0(react@19.0.0)
-      next: 15.2.1(@babel/core@7.26.9)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
-      react: 19.0.0
-      react-aria-components: 1.6.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
-      react-dom: 19.0.0(react@19.0.0)
-      react-hook-form: 7.54.2(react@19.0.0)
-      react-icons: 5.5.0(react@19.0.0)
-      thenby: 1.3.4
-      zustand: 5.0.3(@types/react@19.0.10)(immer@9.0.21)(react@19.0.0)(use-sync-external-store@1.4.0(react@19.0.0))
-    transitivePeerDependencies:
-      - '@babel/core'
-      - '@opentelemetry/api'
-      - '@playwright/test'
-      - '@types/react'
-      - babel-plugin-macros
-      - babel-plugin-react-compiler
-      - immer
-      - sass
-      - use-sync-external-store
-
   '@umami/redis-client@0.26.0':
     dependencies:
       debug: 4.4.0(supports-color@8.1.1)
@@ -14375,10 +14323,6 @@ snapshots:
     dependencies:
       react: 19.0.0
 
-  react-icons@5.5.0(react@19.0.0):
-    dependencies:
-      react: 19.0.0
-
   react-intl@7.1.6(react@19.0.0)(typescript@5.8.2):
     dependencies:
       '@formatjs/ecma402-abstract': 2.3.3
@@ -15600,10 +15544,3 @@ snapshots:
       '@types/react': 19.0.10
       immer: 9.0.21
       react: 19.0.0
-
-  zustand@5.0.3(@types/react@19.0.10)(immer@9.0.21)(react@19.0.0)(use-sync-external-store@1.4.0(react@19.0.0)):
-    optionalDependencies:
-      '@types/react': 19.0.10
-      immer: 9.0.21
-      react: 19.0.0
-      use-sync-external-store: 1.4.0(react@19.0.0)

src/components/charts/BarChart.tsx

@@ -1,8 +1,8 @@
+import { useMemo, useState } from 'react';
 import { BarChartTooltip } from '@/components/charts/BarChartTooltip';
 import { Chart, ChartProps } from '@/components/charts/Chart';
 import { useTheme } from '@/components/hooks';
 import { renderNumberLabels } from '@/lib/charts';
-import { useMemo, useState } from 'react';
 
 export interface BarChartProps extends ChartProps {
   unit: string;

src/components/charts/BarChartTooltip.tsx

@@ -1,7 +1,7 @@
 import { useLocale } from '@/components/hooks';
 import { formatDate } from '@/lib/date';
 import { formatLongCurrency, formatLongNumber } from '@/lib/format';
-import { Flexbox, StatusLight } from '@umami/react-zen';
+import { Column, Row, StatusLight, FloatingTooltip, TooltipBubble } from '@umami/react-zen';
 
 const formats = {
   millisecond: 'T',
@@ -20,18 +20,25 @@ export function BarChartTooltip({ tooltip, unit, currency }) {
   const { labelColors, dataPoints } = tooltip;
 
   return (
-    <Flexbox direction="column" gap={10}>
-      <div>
-        {formatDate(new Date(dataPoints[0].raw.d || dataPoints[0].raw.x), formats[unit], locale)}
-      </div>
-      <div>
-        <StatusLight color={labelColors?.[0]?.backgroundColor}>
-          {currency
-            ? formatLongCurrency(dataPoints[0].raw.y, currency)
-            : formatLongNumber(dataPoints[0].raw.y)}{' '}
-          {dataPoints[0].dataset.label}
-        </StatusLight>
-      </div>
-    </Flexbox>
+    <FloatingTooltip>
+      <TooltipBubble>
+        <Column gap="3" fontSize="1">
+          <Row alignItems="center">
+            {formatDate(
+              new Date(dataPoints[0].raw.d || dataPoints[0].raw.x),
+              formats[unit],
+              locale,
+            )}
+          </Row>
+          <Row alignItems="center">
+            <StatusLight color={labelColors?.[0]?.backgroundColor}>
+              {currency
+                ? formatLongCurrency(dataPoints[0].raw.y, currency)
+                : `${formatLongNumber(dataPoints[0].raw.y)} ${dataPoints[0].dataset.label}`}
+            </StatusLight>
+          </Row>
+        </Column>
+      </TooltipBubble>
+    </FloatingTooltip>
   );
 }

src/components/charts/Chart.tsx

@@ -2,7 +2,6 @@ import { useState, useRef, useEffect, useMemo, ReactNode } from 'react';
 import { Loading } from '@umami/react-zen';
 import classNames from 'classnames';
 import ChartJS, { LegendItem, ChartOptions } from 'chart.js/auto';
-import { HoverTooltip } from '@/components/common/HoverTooltip';
 import { Legend } from '@/components/metrics/Legend';
 import { DEFAULT_ANIMATION_DURATION } from '@/lib/constants';
 import styles from './Chart.module.css';
@@ -34,7 +33,7 @@ export function Chart({
   className,
   chartOptions,
 }: ChartProps) {
-  const canvas = useRef();
+  const canvas = useRef(null);
   const chart = useRef(null);
   const [legendItems, setLegendItems] = useState([]);
 
@@ -143,11 +142,7 @@ export function Chart({
         <canvas ref={canvas} />
       </div>
       <Legend items={legendItems} onClick={handleLegendClick} />
-      {tooltip && (
-        <HoverTooltip>
-          <div className={styles.tooltip}>{tooltip}</div>
-        </HoverTooltip>
-      )}
+      {tooltip}
     </>
   );
 }

src/components/common/HoverTooltip.module.css

@@ -1,6 +0,0 @@
-.tooltip {
-  position: fixed;
-  pointer-events: none;
-  z-index: var(--z-index-popup);
-  transform: translate(-50%, calc(-100% - 5px));
-}

src/components/common/HoverTooltip.tsx

@@ -1,25 +0,0 @@
-import { ReactNode, useEffect, useState } from 'react';
-import { Tooltip } from '@umami/react-zen';
-import styles from './HoverTooltip.module.css';
-
-export function HoverTooltip({ children }: { children: ReactNode }) {
-  const [position, setPosition] = useState({ x: -1000, y: -1000 });
-
-  useEffect(() => {
-    const handler = e => {
-      setPosition({ x: e.clientX, y: e.clientY });
-    };
-
-    document.addEventListener('mousemove', handler);
-
-    return () => {
-      document.removeEventListener('mousemove', handler);
-    };
-  }, []);
-
-  return (
-    <Tooltip className={styles.tooltip} style={{ left: position.x, top: position.y }}>
-      {children}
-    </Tooltip>
-  );
-}

src/components/input/LogoutButton.tsx

@@ -1,22 +0,0 @@
-import { Button, Icon, Icons, TooltipPopup } from '@umami/react-zen';
-import Link from 'next/link';
-import { useMessages } from '@/components/hooks';
-
-export function LogoutButton({
-  tooltipPosition = 'top',
-}: {
-  tooltipPosition?: 'top' | 'bottom' | 'left' | 'right';
-}) {
-  const { formatMessage, labels } = useMessages();
-  return (
-    <Link href="/src/app/logout/LogoutPage">
-      <TooltipPopup label={formatMessage(labels.logout)} position={tooltipPosition}>
-        <Button variant="quiet">
-          <Icon>
-            <Icons.Logout />
-          </Icon>
-        </Button>
-      </TooltipPopup>
-    </Link>
-  );
-}

src/components/metrics/WorldMap.tsx

@@ -2,7 +2,6 @@ import { useState, useMemo, HTMLAttributes } from 'react';
 import { ComposableMap, Geographies, Geography, ZoomableGroup } from 'react-simple-maps';
 import classNames from 'classnames';
 import { colord } from 'colord';
-import { HoverTooltip } from '@/components/common/HoverTooltip';
 import { ISO_COUNTRIES, MAP_FILE } from '@/lib/constants';
 import { useDateRange, useTheme, useWebsiteMetrics } from '@/components/hooks';
 import { useCountryNames } from '@/components/hooks';
@@ -11,6 +10,7 @@ import { useMessages } from '@/components/hooks';
 import { formatLongNumber } from '@/lib/format';
 import { percentFilter } from '@/lib/filters';
 import styles from './WorldMap.module.css';
+import { FloatingTooltip } from '@umami/react-zen';
 
 export function WorldMap({
   websiteId,
@@ -104,7 +104,7 @@ export function WorldMap({
           </Geographies>
         </ZoomableGroup>
       </ComposableMap>
-      {tooltip && <HoverTooltip>{tooltip}</HoverTooltip>}
+      {tooltip && <FloatingTooltip>{tooltip}</FloatingTooltip>}
     </div>
   );
 }