added tooltip

src/components/BarChart.tsx

@@ -1,5 +1,6 @@
 import ReactEcharts from "echarts-for-react"
 import { InfoIcon } from "../icons"
+import Tooltip from "./Tooltip"
 
 const BarChart = () => {
   const data = [
@@ -58,10 +59,11 @@ const BarChart = () => {
 
   return (
     <div className="bg-white rounded-md flex flex-col p-4 shadow-md">
-      <div className="flex justify-between px-10 items-center">
+      <div className="flex justify-between px-10 items-center z-10">
         <h4 className="text-xl font-semibold">Proposal</h4>
-
-        <InfoIcon />
+        <Tooltip text="Information about the metrics here.">
+          <InfoIcon />
+        </Tooltip>
       </div>
 
       <ReactEcharts option={option} />

src/components/Tooltip.tsx

@@ -0,0 +1,18 @@
+const Tooltip = ({
+  text,
+  children,
+}: {
+  text: string
+  children: React.ReactNode
+}) => {
+  return (
+    <div className="relative group">
+      {children}
+      <div className="hidden group-hover:block absolute bg-gray-500 text-white text-xs px-3 py-2 rounded-md right-1/4">
+        <div className="min-w-[10rem]">{text}</div>
+      </div>
+    </div>
+  )
+}
+
+export default Tooltip

src/routes/Root.tsx

@@ -28,7 +28,7 @@ function Root() {
           <img
             src={logo}
             alt="logo"
-            className="h-16 w-full cursor-pointer my-4"
+            className="h-16 w-full cursor-pointer my-3"
           />
         </NavLink>