From b2f9166c22fc830a35dbd1e9b121e1a64e22994a Mon Sep 17 00:00:00 2001
From: hamid zarghami <hamid.zarghami1@gmail.com>
Date: Sat, 25 Jul 2026 12:46:57 +0330
Subject: [PATCH] tooltip

---
 src/pages/taskmanager/components/UserAvatar.tsx | 17 ++++++++++++++---
 .../task-detail/comment/CommentItem.tsx         |  2 +-
 .../task-detail/users/TaskDetailUsersList.tsx   |  2 +-
 .../project/components/CreateProjectSidebar.tsx |  2 +-
 .../components/CreateWorkspaceSidebar.tsx       |  2 +-
 5 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/src/pages/taskmanager/components/UserAvatar.tsx b/src/pages/taskmanager/components/UserAvatar.tsx
index 1bc2e64..b31bf63 100644
--- a/src/pages/taskmanager/components/UserAvatar.tsx
+++ b/src/pages/taskmanager/components/UserAvatar.tsx
@@ -5,11 +5,22 @@ type Props = {
   src?: string | null;
   alt?: string;
   className?: string;
+  showTooltip?: boolean;
 };
 
-const UserAvatar: FC<Props> = ({ src, alt = "", className = "size-6" }) => (
-  <div className={`${className} rounded-full overflow-hidden shrink-0 bg-[#D0D0D0]`}>
-    <img src={src || AvatarImage} alt={alt} className="size-full object-cover" />
+const UserAvatar: FC<Props> = ({ src, alt = "", className = "size-6", showTooltip = true }) => (
+  <div className={`relative group/avatar ${className} rounded-full overflow-visible shrink-0`}>
+    <div className="size-full rounded-full overflow-hidden bg-[#D0D0D0]">
+      <img src={src || AvatarImage} alt={alt} className="size-full object-cover" />
+    </div>
+    {showTooltip && alt ? (
+      <span
+        role="tooltip"
+        className="pointer-events-none absolute bottom-full left-1/2 z-20 mb-1.5 -translate-x-1/2 whitespace-nowrap rounded-md bg-[#292D32] px-2 py-1 text-[10px] text-white opacity-0 transition-opacity group-hover/avatar:opacity-100"
+      >
+        {alt}
+      </span>
+    ) : null}
   </div>
 );
 
diff --git a/src/pages/taskmanager/components/task-detail/comment/CommentItem.tsx b/src/pages/taskmanager/components/task-detail/comment/CommentItem.tsx
index 3bc0221..8c03734 100644
--- a/src/pages/taskmanager/components/task-detail/comment/CommentItem.tsx
+++ b/src/pages/taskmanager/components/task-detail/comment/CommentItem.tsx
@@ -69,7 +69,7 @@ const CommentItem: FC<Props> = ({ comment, taskId }) => {
   return (
     <div className="bg-white/25 rounded-xl p-3">
       <div className="flex items-start gap-2">
-        <UserAvatar src={comment.user?.profilePic} alt={authorName} className="size-7" />
+        <UserAvatar src={comment.user?.profilePic} alt={authorName} className="size-7" showTooltip={false} />
 
         <div className="flex-1 min-w-0">
           <div className="flex items-center justify-between gap-2">
diff --git a/src/pages/taskmanager/components/task-detail/users/TaskDetailUsersList.tsx b/src/pages/taskmanager/components/task-detail/users/TaskDetailUsersList.tsx
index d56c755..eb7e589 100644
--- a/src/pages/taskmanager/components/task-detail/users/TaskDetailUsersList.tsx
+++ b/src/pages/taskmanager/components/task-detail/users/TaskDetailUsersList.tsx
@@ -72,7 +72,7 @@ const TaskDetailUsersList: FC<Props> = ({
                     onToggle={() => onToggle(user.id)}
                     ariaLabel={user.name}
                   />
-                  <UserAvatar src={user.avatar} alt={user.name} />
+                  <UserAvatar src={user.avatar} alt={user.name} showTooltip={false} />
                   <div className="text-[10px]">{user.name}</div>
                 </div>
               );
diff --git a/src/pages/taskmanager/project/components/CreateProjectSidebar.tsx b/src/pages/taskmanager/project/components/CreateProjectSidebar.tsx
index 7c3c3a0..63c5b04 100644
--- a/src/pages/taskmanager/project/components/CreateProjectSidebar.tsx
+++ b/src/pages/taskmanager/project/components/CreateProjectSidebar.tsx
@@ -155,7 +155,7 @@ const CreateProjectSidebar: FC<Props> = ({
           ) : (
             selectedUsers.map((user) => (
               <div key={user.id} className="bg-[#EBEEF5] flex gap-2 text-xs items-center px-2 py-2 rounded-lg">
-                <UserAvatar src={user.profilePic} alt={user.name} />
+                <UserAvatar src={user.profilePic} alt={user.name} showTooltip={false} />
                 <div>{user.name}</div>
                 <CloseCircle variant="Bold" className="size-4 cursor-pointer" color="red" onClick={() => handleRemoveUser(user.id)} />
               </div>
diff --git a/src/pages/taskmanager/workspace/components/CreateWorkspaceSidebar.tsx b/src/pages/taskmanager/workspace/components/CreateWorkspaceSidebar.tsx
index 538741b..ab513f2 100644
--- a/src/pages/taskmanager/workspace/components/CreateWorkspaceSidebar.tsx
+++ b/src/pages/taskmanager/workspace/components/CreateWorkspaceSidebar.tsx
@@ -113,7 +113,7 @@ const CreateWorkspaceSidebar: FC<Props> = ({
               key={user.id}
               className="bg-[#EBEEF5] flex gap-2 text-xs items-center px-2 py-2 rounded-lg"
             >
-              <UserAvatar src={user.profilePic} alt={user.name} />
+              <UserAvatar src={user.profilePic} alt={user.name} showTooltip={false} />
               <div>{user.name}</div>
               <CloseCircle
                 variant="Bold"