Use tooltip instead of toast for show help information (#70)

Co-authored-by: tiendn <tiendn@stellalab.com>

package.json

@@ -21,6 +21,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-toastify": "^9.1.1",
+    "react-tooltip": "^5.26.3",
     "urql": "^3.0.3",
     "wagmi": "0.12.18",
     "zod": "^3.21.2",

src/components/icons/HelpIcon.tsx

@@ -1,22 +1,21 @@
 import { memo } from 'react';
-import { toast } from 'react-toastify';
 
 import Question from '../../images/icons/question-circle.svg';
 import { IconButton } from '../buttons/IconButton';
 
 function _HelpIcon({ text, size = 20 }: { text: string; size?: number }) {
-  const onClick = () => {
-    toast.info(text, { autoClose: 8000 });
-  };
-
   return (
     <IconButton
       imgSrc={Question}
       title="Help"
       width={size}
       height={size}
-      onClick={onClick}
       classes="opacity-50"
+      passThruProps={{
+        'data-tooltip-content': text,
+        'data-tooltip-id': 'root-tooltip',
+        'data-tooltip-place': 'top-start',
+      }}
     />
   );
 }

src/pages/_app.tsx

@@ -9,6 +9,7 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import type { AppProps } from 'next/app';
 import { ToastContainer, Zoom, toast } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
+import { Tooltip } from 'react-tooltip';
 import { Provider as UrqlProvider, createClient as createUrqlClient } from 'urql';
 
 import '@hyperlane-xyz/widgets/styles.css';
@@ -84,6 +85,7 @@ export default function App({ Component, router, pageProps }: AppProps) {
         </UrqlProvider>
       </QueryClientProvider>
       <ToastContainer transition={Zoom} position={toast.POSITION.BOTTOM_RIGHT} limit={2} />
+      <Tooltip id="root-tooltip" className="z-50" />
       {/* </RainbowKitProvider> */}
       {/* </WagmiConfig> */}
     </ErrorBoundary>

yarn.lock

@@ -1283,6 +1283,32 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@floating-ui/core@npm:^1.0.0":
+  version: 1.6.0
+  resolution: "@floating-ui/core@npm:1.6.0"
+  dependencies:
+    "@floating-ui/utils": "npm:^0.2.1"
+  checksum: d6a47cacde193cd8ccb4c268b91ccc4ca254dffaec6242b07fd9bcde526044cc976d27933a7917f9a671de0a0e27f8d358f46400677dbd0c8199de293e9746e1
+  languageName: node
+  linkType: hard
+
+"@floating-ui/dom@npm:^1.6.1":
+  version: 1.6.3
+  resolution: "@floating-ui/dom@npm:1.6.3"
+  dependencies:
+    "@floating-ui/core": "npm:^1.0.0"
+    "@floating-ui/utils": "npm:^0.2.0"
+  checksum: 83e97076c7a5f55c3506f574bc53f03d38bed6eb8181920c8733076889371e287e9ae6f28c520a076967759b9b6ff425362832a5cdf16a999069530dbb9cce53
+  languageName: node
+  linkType: hard
+
+"@floating-ui/utils@npm:^0.2.0, @floating-ui/utils@npm:^0.2.1":
+  version: 0.2.1
+  resolution: "@floating-ui/utils@npm:0.2.1"
+  checksum: 33c9ab346e7b05c5a1e6a95bc902aafcfc2c9d513a147e2491468843bd5607531b06d0b9aa56aa491cbf22a6c2495c18ccfc4c0344baec54a689a7bb8e4898d6
+  languageName: node
+  linkType: hard
+
 "@gar/promisify@npm:^1.1.3":
   version: 1.1.3
   resolution: "@gar/promisify@npm:1.1.3"
@@ -1387,6 +1413,7 @@ __metadata:
     react: "npm:^18.2.0"
     react-dom: "npm:^18.2.0"
     react-toastify: "npm:^9.1.1"
+    react-tooltip: "npm:^5.26.3"
     tailwindcss: "npm:^3.3.3"
     ts-node: "npm:^10.9.1"
     typescript: "npm:^5.1.6"
@@ -4660,6 +4687,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"classnames@npm:^2.3.0":
+  version: 2.5.1
+  resolution: "classnames@npm:2.5.1"
+  checksum: 58eb394e8817021b153bb6e7d782cfb667e4ab390cb2e9dac2fc7c6b979d1cc2b2a733093955fc5c94aa79ef5c8c89f11ab77780894509be6afbb91dddd79d15
+  languageName: node
+  linkType: hard
+
 "clean-stack@npm:^2.0.0":
   version: 2.2.0
   resolution: "clean-stack@npm:2.2.0"
@@ -9220,6 +9254,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-tooltip@npm:^5.26.3":
+  version: 5.26.3
+  resolution: "react-tooltip@npm:5.26.3"
+  dependencies:
+    "@floating-ui/dom": "npm:^1.6.1"
+    classnames: "npm:^2.3.0"
+  peerDependencies:
+    react: ">=16.14.0"
+    react-dom: ">=16.14.0"
+  checksum: be17e091e53c98b2295c6429c13f0631bfaf559f1f8577fc805d0b2dd91c087cccf834f068a34492d1fa6b4bee1236a5c6635b1b751910b23f539eceacb864c4
+  languageName: node
+  linkType: hard
+
 "react@npm:^18.2.0":
   version: 18.2.0
   resolution: "react@npm:18.2.0"