Use FloatingTooltip from zen.

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}
     </>
   );
 }