chore: add tooltip for user info

space/components/issues/peek-overview/comment/comment-reactions.tsx

@@ -6,7 +6,7 @@ import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
 import { useMobxStore } from "lib/mobx/store-provider";
 // ui
-import { ReactionSelector } from "components/ui";
+import { ReactionSelector, Tooltip } from "components/ui";
 // helpers
 import { groupReactions, renderEmoji } from "helpers/emoji.helper";
 
@@ -77,10 +77,24 @@ export const CommentReactions: React.FC<Props> = observer((props) => {
         size="md"
       />
 
-      {Object.keys(groupedReactions || {}).map(
+      {Object.keys(groupedReactions || {}).map((reaction) => {
-        (reaction) =>
+        const reactions = groupedReactions?.[reaction] ?? [];
-          groupedReactions?.[reaction]?.length &&
+        const REACTIONS_LIMIT = 1000;
-          groupedReactions[reaction].length > 0 && (
+
+        if (reactions.length > 0)
+          return (
+            <Tooltip
+              key={reaction}
+              tooltipContent={
+                <div>
+                  {reactions
+                    .map((r) => r.actor_detail.display_name)
+                    .splice(0, REACTIONS_LIMIT)
+                    .join(", ")}
+                  {reactions.length > REACTIONS_LIMIT && " and " + (reactions.length - REACTIONS_LIMIT) + " more"}
+                </div>
+              }
+            >
               <button
                 type="button"
                 onClick={() => {
@@ -88,7 +102,6 @@ export const CommentReactions: React.FC<Props> = observer((props) => {
                     handleReactionClick(reaction);
                   });
                 }}
-              key={reaction}
                 className={`flex items-center gap-1 text-custom-text-100 text-sm h-full px-2 py-1 rounded-md ${
                   commentReactions?.some(
                     (r) => r.actor_detail.id === userStore.currentUser?.id && r.reaction === reaction
@@ -110,8 +123,9 @@ export const CommentReactions: React.FC<Props> = observer((props) => {
                   {groupedReactions?.[reaction].length}{" "}
                 </span>
               </button>
-          )
+            </Tooltip>
-      )}
+          );
+      })}
     </div>
   );
 });