Dev

src/components/profile/Badge.jsx

@@ -1,13 +1,14 @@
 import React from 'react';
 import { Tooltip } from 'react-tooltip';
+import CusTooltip from './BadgeOnhover';
 
 const Badge =  ({ active, createdAt, badgeName, badgeImage, badgeDescription, badgeReason }) => {
 
 
     return (
+    <CusTooltip name={badgeName} description={badgeDescription} icon={<img src={badgeImage}/>} reason={badgeReason} date={createdAt}>
     <div
     className="border border-neutral-700 border-2 bg-neutral-800 align-center mx-auto w-full rounded-lg px-4 py-4 text-center duration-4000 min-h-[190px] min-w-[200px] transition ease-in-out hover:bg-neutral-700/40"
-    data-tooltip-content={badgeReason}
     data-tooltip-id="badge-tooltip"
     data-tooltip-place="top"
     >
@@ -18,17 +19,8 @@ const Badge =  ({ active, createdAt, badgeName, badgeImage, badgeDescription, ba
       className="mx-auto mt-2 px-1"
     />
 
-    <h1 className="mx-auto mt-2 text-center text-xl text-white">
-        {badgeName.charAt(0).toUpperCase() + badgeName.slice(1).toLowerCase()}
-    </h1>
-    <h1 className="text-lg text-white">
-      {new Date(createdAt).toLocaleDateString('en-US', {
-        month: '2-digit',
-        day: '2-digit',
-        year: 'numeric',
-      })}
-    </h1>
   </div>
+  </CusTooltip>
 )};
 
 export default Badge;

src/components/profile/BadgeOnhover.jsx

@@ -0,0 +1,63 @@
+import React, { useState } from 'react';
+import Tooltip, { tooltipClasses } from '@mui/material/Tooltip';
+import { styled } from '@mui/material/styles';
+
+const CustomTooltip = styled(({ className, ...props }) => (
+  <Tooltip  {...props} classes={{ popper: className }} />
+))({
+  [`& .${tooltipClasses.tooltip}`]: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center', 
+    textAlign: 'center',
+    backgroundColor: '#111827',
+    color: 'white',
+    fontSize: 15,
+    borderRadius: '1rem', 
+    padding: '0.8rem', 
+    width: '400px', 
+    height: '200px', 
+    overflow: 'hidden'
+
+
+
+  }, [`& .${tooltipClasses.arrow}`]: {
+    color: '#111827'
+  },
+});
+
+export default function CusTooltip ({children ,name, description, icon, reason, date}) {
+  const [onHover, setOnHover] = useState(false);
+
+  return (
+    <CustomTooltip title={
+        <div className='flex flex-col items-center' > 
+            {icon && <div className='mb-2 w-20'>{icon}</div>}
+            <div className='flex flex-col items-center'>{name}</div>
+            <div className='flex flex-col items-center ' onMouseEnter={()=>setOnHover(true)}
+                onMouseLeave={()=>setOnHover(false)}
+
+                > <div className={`transition-opacity duration-200 ${onHover ? 'opacity-0' : 'opacity-100'}`}>
+            {description}
+          </div>
+          <div className={`transition-opacity duration-200 absolute text-yellow-300 ${onHover ? 'opacity-100' : 'opacity-0'}`}>
+            {reason}
+          </div>
+            </div>
+            <div className='flex flex-col items-center'>
+            {new Date(date).toLocaleDateString('en-US', 
+                {
+                    month: '2-digit',
+                    day: '2-digit',
+                    year: 'numeric',
+                })}</div>
+
+        </div>
+
+    } arrow placement='top'>
+      <span>{children}</span>
+    </CustomTooltip>
+  );
+};
+

src/components/profile/v2/Badges.jsx

@@ -5,7 +5,7 @@ import Badge from '@/components/profile/Badge.jsx';
 import { useRouter } from 'next/router';
 import Skeleton from 'react-loading-skeleton';
 import 'react-loading-skeleton/dist/skeleton.css';
-
+import CusTooltip from '../BadgeOnhover';
 const Badges = ({ user }) => {
 
   const router = useRouter();
@@ -23,9 +23,7 @@ const Badges = ({ user }) => {
   }, [user]);
   if (loading) return <div className='text-neutral-400'><Skeleton width="100%" baseColor="#363535" highlightColor="#615f5f"  /></div>;
   console.log("USER BADGES:", badges);
-  console.log("BADGE 1 NAME", badges[0]);
-  console.log("CREATED AT 1", badges[0].createdAt);
-
+
 
   /*
   Badge object returned:
@@ -76,7 +74,9 @@ const Badges = ({ user }) => {
   return (
   <div className="grid grid-cols-5 gap-x-2 gap-y-2 rounded-sm bg-neutral-800 mt-4">
           {badges && badges.length > 0 ? (
+
             badges.map((badge) => (
+
               <Badge
                 key={badge.id}
                 active={badge.badge.active}

src/pages/users/[user].jsx

@@ -25,9 +25,8 @@ import 'react-circular-progressbar/dist/styles.css';
 //toast
 import { toast, ToastContainer } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
-
-
-// Register the necessary chart components
+import CusTooltip from '@/components/profile/BadgeOnhover';
+// Register the necessary chart component
 ChartJS.register(RadialLinearScale, PointElement, LineElement, Filler, Tooltip, Legend, ArcElement);
 
 const mockActivityData = [
@@ -819,6 +818,14 @@ export default function Create() {
                         <div className="flex w-40">
                             <a href={ownUser ? "../settings" : "#"}>
                                 {(user && (
+                                    <CusTooltip description="rssssssssssssssssss" icon={ <img
+                                        className="rounded-full hover:bg-[#212121]  w-20"
+                                        src={
+                                            user.profileImage ||
+                                            'https://robohash.org/' + user.username
+                                        }
+                                        alt=""
+                                    />}>
                                     <img
                                         className="rounded-full hover:bg-[#212121] sm:h-32 sm:w-32"
                                         src={
@@ -827,6 +834,7 @@ export default function Create() {
                                         }
                                         alt=""
                                     />
+                                    </CusTooltip>
                                 )) || (
                                         <Skeleton
                                             circle={true}
@@ -1021,7 +1029,8 @@ export default function Create() {
                           <div className="mb-2 w-full flex justify-between  ">
                             <div className="flex space-x-2  rounded-md">
                                 {user && (
-                                    <h1 className='text-xl text-white font-bold uppercase mb-1'>ABOUT {user.username}</h1>
+                                    <h1 className='text-xl text-white font-bold uppercase mb-1'>ABOUT {user.username}
+                                    </h1>
                                 )}
                             </div>
                             {bioViewCheck() ? renderEditButton():'' }