Feat: Add Hover Feature to Display Button Information

client/app/components/ActionToolTip/ActionToolTip.tsx

@@ -0,0 +1,73 @@
+"use client";
+
+import { 
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import React from "react";
+import { useMediaQuery } from "rsuite/esm/useMediaQuery/useMediaQuery";
+
+
+interface ActionToolTipProps {
+  label: string;
+  align?: "start" | "center" | "end" ;
+  side?: "top" | "right" | "bottom" | "left";
+  children: React.ReactNode;
+  classname: string;
+  responsive: boolean;
+}
+
+const ActionToolTip = ({
+  label,
+  align = "center",
+  side = "top",
+  children,
+  classname = "",
+  responsive
+}: ActionToolTipProps) => {
+
+  return (
+    <TooltipProvider>
+    {responsive ? (
+      <div>
+        <div className="sm:hidden">
+          <Tooltip delayDuration={10}>
+            <TooltipTrigger asChild>
+              {children}
+            </TooltipTrigger>
+            <TooltipContent side={side} align={align}>
+              {label && (
+                <p className="font-semibold text-sm capitalize">
+                  {label.toLocaleLowerCase()}
+                </p>
+              )}
+            </TooltipContent>
+          </Tooltip>
+        </div>
+        <div className="hidden sm:block">
+          {children}
+        </div>
+      </div>
+    ) : (
+      <Tooltip delayDuration={50}>
+        <TooltipTrigger asChild>
+          {children}
+        </TooltipTrigger>
+        <TooltipContent side={side} align={align}>
+          {label && (
+            <p className="font-semibold text-sm capitalize">
+              {label.toLocaleLowerCase()}
+            </p>
+          )}
+        </TooltipContent>
+      </Tooltip>
+    )}
+  </TooltipProvider>
+
+  );
+};
+
+
+export default ActionToolTip;

client/app/components/ChatBot/ChatBot.tsx

@@ -3,6 +3,7 @@
 import React, { useState, useRef, useEffect } from "react";
 import { motion, AnimatePresence } from "framer-motion";
 import { ArrowUpIcon, ChatBubbleLeftRightIcon } from "@heroicons/react/24/solid";
+import ActionToolTip from "../ActionToolTip/ActionToolTip";
 
 interface Message {
   content: string;
@@ -54,6 +55,7 @@ const ChatBot: React.FC = () => {
   };
 
   return (
+    <ActionToolTip label="ChatBot" align="center" side="left" responsive={false}>
     <div className="fixed bottom-4 right-4 z-50">
       <motion.div initial={false} animate={isOpen ? "open" : "closed"} className="relative">
         <motion.button
@@ -120,6 +122,7 @@ const ChatBot: React.FC = () => {
         </AnimatePresence>
       </motion.div>
     </div>
+    </ActionToolTip>
   );
 };
 

client/app/components/Header/Header.tsx

@@ -11,6 +11,7 @@ import {
 } from "@heroicons/react/24/outline";
 import Web3Connect from "../Helper/Web3Connect";
 import Image from "next/image";
+import ActionToolTip from "../ActionToolTip/ActionToolTip";
 
 const menuItems = [
   { name: "Home", href: "/", icon: HomeIcon },
@@ -44,32 +45,36 @@ const Header = () => {
           </Link>
 
           <nav className="flex items-center space-x-4">
-            {menuItems.map((item) => (
-              <Link key={item.name} href={item.href} className="relative">
-                <motion.button
-                  className={`inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md ${
-                    pathname === item.href
-                      ? "text-indigo-600"
-                      : "text-gray-700 hover:text-indigo-600"
-                  } bg-white hover:bg-gray-50`}
-                  whileHover={{ scale: 1.05 }}
-                  whileTap={{ scale: 0.95 }}
-                >
-                  <item.icon className="h-5 w-5 mr-2" aria-hidden="true" />
-                  <span className="hidden sm:inline">{item.name}</span>
-                </motion.button>
-                {pathname === item.href && (
-                  <motion.div
-                    className="absolute bottom-0 left-0 right-0 h-0.5 bg-indigo-600"
-                    layoutId="underline"
-                    initial={{ opacity: 0 }}
-                    animate={{ opacity: 1 }}
-                    transition={{ duration: 0.3 }}
-                  />
-                )}
-              </Link>
-            ))}
-            <Web3Connect />
+
+              {menuItems.map((item) => (
+                <ActionToolTip label={item.name} align="center" responsive side="bottom" classname="hidden sm:inline">
+                  <Link key={item.name} href={item.href} className="relative">
+                    <motion.button
+                      className={`inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md ${
+                        pathname === item.href
+                          ? "text-indigo-600"
+                          : "text-gray-700 hover:text-indigo-600"
+                      } bg-white hover:bg-gray-50`}
+                      whileHover={{ scale: 1.05 }}
+                      whileTap={{ scale: 0.95 }}
+                    >
+                      <item.icon className="h-5 w-5 mr-2" aria-hidden="true" />
+                      <span className="hidden sm:inline">{item.name}</span>
+                    </motion.button>
+                    {pathname === item.href && (
+                      <motion.div
+                        className="absolute bottom-0 left-0 right-0 h-0.5 bg-indigo-600"
+                        layoutId="underline"
+                        initial={{ opacity: 0 }}
+                        animate={{ opacity: 1 }}
+                        transition={{ duration: 0.3 }}
+                      />
+                    )}
+                  </Link>
+                </ActionToolTip>
+              ))}
+              <Web3Connect />
+
           </nav>
         </div>
       </div>

client/app/components/Helper/Web3Connect.tsx

@@ -1,17 +1,20 @@
 import React from "react";
 import { ConnectButton } from "@rainbow-me/rainbowkit";
 import "@rainbow-me/rainbowkit/styles.css";
+import ActionToolTip from "../ActionToolTip/ActionToolTip";
 const Web3Connect = () => {
   return (
-    <div className="p-4">
-      <ConnectButton
-        accountStatus={{
-          smallScreen: "avatar",
-          largeScreen: "full",
-        }}
-        showBalance={false}
-      />
-    </div>
+    <ActionToolTip label="Switch networks & Credentials" responsive={false}>
+      <div className="p-4">
+        <ConnectButton
+          accountStatus={{
+            smallScreen: "avatar",
+            largeScreen: "full",
+          }}
+          showBalance={false}
+        />
+      </div>
+    </ActionToolTip>
   );
 };
 

client/app/globals.css

@@ -27,4 +27,69 @@ body {
 
 ::-webkit-scrollbar-thumb:hover {
   background-color: #ebe4e4; 
+}
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 20 14.3% 4.1%;
+    --card: 0 0% 100%;
+    --card-foreground: 20 14.3% 4.1%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 20 14.3% 4.1%;
+    --primary: 24 9.8% 10%;
+    --primary-foreground: 60 9.1% 97.8%;
+    --secondary: 60 4.8% 95.9%;
+    --secondary-foreground: 24 9.8% 10%;
+    --muted: 60 4.8% 95.9%;
+    --muted-foreground: 25 5.3% 44.7%;
+    --accent: 60 4.8% 95.9%;
+    --accent-foreground: 24 9.8% 10%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 60 9.1% 97.8%;
+    --border: 20 5.9% 90%;
+    --input: 20 5.9% 90%;
+    --ring: 20 14.3% 4.1%;
+    --chart-1: 12 76% 61%;
+    --chart-2: 173 58% 39%;
+    --chart-3: 197 37% 24%;
+    --chart-4: 43 74% 66%;
+    --chart-5: 27 87% 67%;
+    --radius: 0.5rem;
+  }
+  .dark {
+    --background: 20 14.3% 4.1%;
+    --foreground: 60 9.1% 97.8%;
+    --card: 20 14.3% 4.1%;
+    --card-foreground: 60 9.1% 97.8%;
+    --popover: 20 14.3% 4.1%;
+    --popover-foreground: 60 9.1% 97.8%;
+    --primary: 60 9.1% 97.8%;
+    --primary-foreground: 24 9.8% 10%;
+    --secondary: 12 6.5% 15.1%;
+    --secondary-foreground: 60 9.1% 97.8%;
+    --muted: 12 6.5% 15.1%;
+    --muted-foreground: 24 5.4% 63.9%;
+    --accent: 12 6.5% 15.1%;
+    --accent-foreground: 60 9.1% 97.8%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 60 9.1% 97.8%;
+    --border: 12 6.5% 15.1%;
+    --input: 12 6.5% 15.1%;
+    --ring: 24 5.7% 82.9%;
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
 }

client/components.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.ts",
+    "css": "app/globals.css",
+    "baseColor": "stone",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
+}

client/components/ui/tooltip.tsx

@@ -0,0 +1,30 @@
+"use client"
+
+import * as React from "react"
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+
+import { cn } from "@/lib/utils"
+
+const TooltipProvider = TooltipPrimitive.Provider
+
+const Tooltip = TooltipPrimitive.Root
+
+const TooltipTrigger = TooltipPrimitive.Trigger
+
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Content
+    ref={ref}
+    sideOffset={sideOffset}
+    className={cn(
+      "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    )}
+    {...props}
+  />
+))
+TooltipContent.displayName = TooltipPrimitive.Content.displayName
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }

client/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}