update tooltip component

src/components/tooltip.tsx

@@ -1,10 +1,44 @@
-export default function Tooltip({ message, children }: { message: string; children: React.ReactNode }) {
+import { autoUpdate, offset, shift, useFloating, useFocus, useHover, useInteractions } from '@floating-ui/react';
+import { useState } from 'react';
+
+export default function Tooltip({ children, message }: { children: React.ReactNode; message: string }) {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const { x, y, strategy, refs, context } = useFloating({
+    open: isOpen,
+    onOpenChange: setIsOpen,
+    placement: 'top',
+    middleware: [offset(8), shift()],
+    whileElementsMounted(...args) {
+      const cleanup = autoUpdate(...args, { animationFrame: true });
+      return cleanup;
+    },
+  });
+
+  const hover = useHover(context);
+  const focus = useFocus(context);
+
+  const { getReferenceProps, getFloatingProps } = useInteractions([hover, focus]);
+
   return (
-    <div className="group relative flex">
-      {children}
-      <span className="absolute top-10 scale-0 rounded bg-zinc-800 p-2 text-xs text-zinc-100 transition-all group-hover:scale-100">
-        {message}
-      </span>
-    </div>
+    <>
+      <div ref={refs.setReference} {...getReferenceProps()}>
+        {children}
+      </div>
+      {isOpen && (
+        <div
+          ref={refs.setFloating}
+          className="w-max select-none rounded-md bg-zinc-800 px-4 py-2 text-xs font-medium leading-none text-zinc-100"
+          style={{
+            position: strategy,
+            top: y ?? 0,
+            left: x ?? 0,
+          }}
+          {...getFloatingProps()}
+        >
+          {message}
+        </div>
+      )}
+    </>
   );
 }