Use FloatingTooltip from zen.

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