From 50e29beda45f39ca06ffedaa259d742d3a7c42ad Mon Sep 17 00:00:00 2001
From: Ren Amamiya <123083837+reyamir@users.noreply.github.com>
Date: Tue, 25 Apr 2023 08:06:40 +0700
Subject: [PATCH] update tooltip component

---
 package.json               |  1 +
 pnpm-lock.yaml             | 55 +++++++++++++++++++++++++++++++++++++-
 src/components/tooltip.tsx | 48 ++++++++++++++++++++++++++++-----
 3 files changed, 96 insertions(+), 8 deletions(-)

diff --git a/package.json b/package.json
index de5c20ee..3c61826d 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
     "**/*.{js,ts,jsx,tsx}": "eslint --fix"
   },
   "dependencies": {
+    "@floating-ui/react": "^0.23.1",
     "@headlessui/react": "^1.7.14",
     "@supabase/supabase-js": "^2.21.0",
     "@tauri-apps/api": "^1.2.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f9978d2e..d3d6eb23 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1,6 +1,9 @@
 lockfileVersion: '6.0'
 
 dependencies:
+  '@floating-ui/react':
+    specifier: ^0.23.1
+    version: 0.23.1(react-dom@18.2.0)(react@18.2.0)
   '@headlessui/react':
     specifier: ^1.7.14
     version: 1.7.14(react-dom@18.2.0)(react@18.2.0)
@@ -570,6 +573,44 @@ packages:
     engines: { node: ^12.22.0 || ^14.17.0 || >=16.0.0 }
     dev: true
 
+  /@floating-ui/core@1.2.6:
+    resolution:
+      { integrity: sha512-EvYTiXet5XqweYGClEmpu3BoxmsQ4hkj3QaYA6qEnigCWffTP3vNRwBReTdrwDwo7OoJ3wM8Uoe9Uk4n+d4hfg== }
+    dev: false
+
+  /@floating-ui/dom@1.2.6:
+    resolution:
+      { integrity: sha512-02vxFDuvuVPs22iJICacezYJyf7zwwOCWkPNkWNBr1U0Qt1cKFYzWvxts0AmqcOQGwt/3KJWcWIgtbUU38keyw== }
+    dependencies:
+      '@floating-ui/core': 1.2.6
+    dev: false
+
+  /@floating-ui/react-dom@1.3.0(react-dom@18.2.0)(react@18.2.0):
+    resolution:
+      { integrity: sha512-htwHm67Ji5E/pROEAr7f8IKFShuiCKHwUC/UY4vC3I5jiSvGFAYnSYiZO5MlGmads+QqvUkR9ANHEguGrDv72g== }
+    peerDependencies:
+      react: '>=16.8.0'
+      react-dom: '>=16.8.0'
+    dependencies:
+      '@floating-ui/dom': 1.2.6
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: false
+
+  /@floating-ui/react@0.23.1(react-dom@18.2.0)(react@18.2.0):
+    resolution:
+      { integrity: sha512-OCc2ViQOBUKOGcE9NLAbpyqB+8Zz92IKIhxgz7XAkynKkVzcVSKtkWOcgyvO4SAzB2OybgRwk3WdzdzDRdh2QQ== }
+    peerDependencies:
+      react: '>=16.8.0'
+      react-dom: '>=16.8.0'
+    dependencies:
+      '@floating-ui/react-dom': 1.3.0(react-dom@18.2.0)(react@18.2.0)
+      aria-hidden: 1.2.3
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+      tabbable: 6.1.1
+    dev: false
+
   /@headlessui/react@1.7.14(react-dom@18.2.0)(react@18.2.0):
     resolution:
       { integrity: sha512-znzdq9PG8rkwcu9oQ2FwIy0ZFtP9Z7ycS+BAqJ3R5EIqC/0bJGvhT7193rFf+45i9nnPsYvCQVW4V/bB9Xc+gA== }
@@ -1385,6 +1426,14 @@ packages:
       { integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q== }
     dev: true
 
+  /aria-hidden@1.2.3:
+    resolution:
+      { integrity: sha512-xcLxITLe2HYa1cnYnwCjkOO1PqUHQpozB8x9AR0OgWN2woOBi5kSDVxKfd0b7sb1hw5qFeJhXm9H1nu3xSfLeQ== }
+    engines: { node: '>=10' }
+    dependencies:
+      tslib: 2.5.0
+    dev: false
+
   /array-buffer-byte-length@1.0.0:
     resolution:
       { integrity: sha512-LPuwb2P+NrQw3XhxGc36+XSvuBPopovXYTR9Ew++Du9Yb/bx5AzBfrIsBoj0EZUifjQU+sHL21sseZ3jerWO/A== }
@@ -3920,6 +3969,11 @@ packages:
       use-sync-external-store: 1.2.0(react@18.2.0)
     dev: false
 
+  /tabbable@6.1.1:
+    resolution:
+      { integrity: sha512-4kl5w+nCB44EVRdO0g/UGoOp3vlwgycUVtkk/7DPyeLZUCuNFFKCFG6/t/DgHLrUPHjrZg6s5tNm+56Q2B0xyg== }
+    dev: false
+
   /tailwind-merge@1.12.0:
     resolution:
       { integrity: sha512-Y17eDp7FtN1+JJ4OY0Bqv9OA41O+MS8c1Iyr3T6JFLnOgLg3EvcyMKZAnQ8AGyvB5Nxm3t9Xb5Mhe139m8QT/g== }
@@ -4038,7 +4092,6 @@ packages:
   /tslib@2.5.0:
     resolution:
       { integrity: sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg== }
-    dev: true
 
   /tsutils@3.21.0(typescript@4.9.5):
     resolution:
diff --git a/src/components/tooltip.tsx b/src/components/tooltip.tsx
index 4126fad2..0ff90d0d 100644
--- a/src/components/tooltip.tsx
+++ b/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>
+      )}
+    </>
   );
 }