add tooltips to rightSidebar

package.json

@@ -21,6 +21,7 @@
     "react": "^18",
     "react-dom": "^18",
     "react-force-graph-2d": "^1.25.5",
+    "react-tooltip": "^5.28.0",
     "tailwind-merge": "^2.4.0"
   },
   "devDependencies": {

src/app/graph/components/RightSidebar.tsx

@@ -3,6 +3,8 @@ import { Node, BadgeHolderReferralInfo } from "../types";
 import { useConvertAddressToENS } from "@/app/hooks/useConvertAddressToENS";
 import { useFarcasterData } from "@/app/hooks/useFarcasterData";
 import { useRouter, usePathname } from "next/navigation";
+import { Tooltip } from "react-tooltip";
+import { Info } from "lucide-react";
 
 interface RightSidebarProps {
   selectedNode: Node | null;
@@ -178,7 +180,20 @@ const BadgeholderReferralSection: React.FC<{
 
   return (
     <div className="mb-6">
-      <h3 className="text-lg font-semibold mb-2">Badgeholder Referral</h3>
+      <h3 className="text-lg font-semibold mb-2 flex items-center">
+        <span className="mr-2">Badgeholder Referral</span>
+        <Info
+          size={16}
+          className="text-dark-text-secondary cursor-help"
+          data-tooltip-id="badgeholder-referral-tooltip"
+        />
+      </h3>
+      <Tooltip
+        id="badgeholder-referral-tooltip"
+        place="top"
+        className="max-w-[300px] text-center"
+        content="Shows referral connections for RPGF (RetroPGF) rounds. 'Referred By' indicates who referred this badgeholder, while 'Referred' shows who this badgeholder referred for participation in specific RPGF rounds."
+      />
       {referrals.referredBy.map((referral, index) => (
         <ReferralItem
           key={`referredBy-${index}`}
@@ -246,7 +261,20 @@ const FarcasterConnectionsSection: React.FC<{
 
   return (
     <div>
-      <h3 className="text-lg font-semibold mb-2">Following on Farcaster</h3>
+      <h3 className="text-lg font-semibold mb-2 flex items-center">
+        <span className="mr-2">Following on Farcaster</span>
+        <Info
+          size={16}
+          className="text-dark-text-secondary cursor-help"
+          data-tooltip-id="farcaster-following-tooltip"
+        />
+      </h3>
+      <Tooltip
+        id="farcaster-following-tooltip"
+        place="top"
+        className="max-w-xs whitespace-pre-line text-center"
+        content={`Accounts that this user follows\non the Farcaster network`}
+      />
       {connections.map((connection, index) =>
         connection.profileImage || connection.profileName ? (
           <div

yarn.lock

@@ -46,6 +46,26 @@
   resolved "https://registry.yarnpkg.com/@eslint/js/-/js-8.57.0.tgz#a5417ae8427873f1dd08b70b3574b453e67b5f7f"
   integrity sha512-Ys+3g2TaW7gADOJzPt83SJtCDhMjndcDMFVQ/Tj9iA1BfJzFKD9mAUXT3OenpuPHbI6P/myECxRJrofUsDx/5g==
 
+"@floating-ui/core@^1.6.0":
+  version "1.6.8"
+  resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.6.8.tgz#aa43561be075815879305965020f492cdb43da12"
+  integrity sha512-7XJ9cPU+yI2QeLS+FCSlqNFZJq8arvswefkZrYI1yQBbftw6FyrZOxYSh+9S7z7TpeWlRt9zJ5IhM1WIL334jA==
+  dependencies:
+    "@floating-ui/utils" "^0.2.8"
+
+"@floating-ui/dom@^1.6.1":
+  version "1.6.11"
+  resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.6.11.tgz#8631857838d34ee5712339eb7cbdfb8ad34da723"
+  integrity sha512-qkMCxSR24v2vGkhYDo/UzxfJN3D4syqSjyuTFz6C7XcpU1pASPRieNI0Kj5VP3/503mOfYiGY891ugBX1GlABQ==
+  dependencies:
+    "@floating-ui/core" "^1.6.0"
+    "@floating-ui/utils" "^0.2.8"
+
+"@floating-ui/utils@^0.2.8":
+  version "0.2.8"
+  resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.2.8.tgz#21a907684723bbbaa5f0974cf7730bd797eb8e62"
+  integrity sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig==
+
 "@humanwhocodes/config-array@^0.11.14":
   version "0.11.14"
   resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.11.14.tgz#d78e481a039f7566ecc9660b4ea7fe6b1fec442b"
@@ -872,6 +892,11 @@ chokidar@^3.5.3:
   optionalDependencies:
     fsevents "~2.3.2"
 
+classnames@^2.3.0:
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.5.1.tgz#ba774c614be0f016da105c858e7159eae8e7687b"
+  integrity sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==
+
 client-only@0.0.1:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/client-only/-/client-only-0.0.1.tgz#38bba5d403c41ab150bff64a95c85013cf73bca1"
@@ -2878,6 +2903,14 @@ react-kapsule@2:
     fromentries "^1.3.2"
     jerrypick "^1.1.1"
 
+react-tooltip@^5.28.0:
+  version "5.28.0"
+  resolved "https://registry.yarnpkg.com/react-tooltip/-/react-tooltip-5.28.0.tgz#c7b5343ab2d740a428494a3d8315515af1f26f46"
+  integrity sha512-R5cO3JPPXk6FRbBHMO0rI9nkUG/JKfalBSQfZedZYzmqaZQgq7GLzF8vcCWx6IhUCKg0yPqJhXIzmIO5ff15xg==
+  dependencies:
+    "@floating-ui/dom" "^1.6.1"
+    classnames "^2.3.0"
+
 react@^18:
   version "18.3.1"
   resolved "https://registry.yarnpkg.com/react/-/react-18.3.1.tgz#49ab892009c53933625bd16b2533fc754cab2891"