Add: ToolTip for Follow Buttons

frontend/src/components/Input/FollowButton.tsx

@@ -16,6 +16,8 @@ const FollowButton: React.FC<FollowButtonProps> = ({ category }) => {
     const [isFollowing, setIsFollowing] = useState<boolean | null>(category.isFollowing);
     const [isLoading, setIsLoading] = useState(false);
     const { followCategory, unfollowCategory } = useCategoryFollow();
+    const [showTip, setTip] = useState(false);
+
 
     useEffect(() => {
         setIsFollowing(category.isFollowing);
@@ -52,10 +54,13 @@ const FollowButton: React.FC<FollowButtonProps> = ({ category }) => {
     };
 
     return (
+        <div>
             <button
                 className="absolute top-2 right-2 bg-black bg-opacity-50 p-2 rounded-full hover:bg-opacity-75 transition z-[1]"
                 onClick={handleClick}
                 disabled={isLoading}
+                onMouseEnter={() => setTip(true)}
+                onMouseLeave={() => setTip(false)}
             >
                 {isLoading ? (
                     <span className="text-white w-5 h-5">⏳</span>
@@ -67,6 +72,26 @@ const FollowButton: React.FC<FollowButtonProps> = ({ category }) => {
                     <CirclePlus className="text-white w-5 h-5" />
                 )}
             </button>
+
+            {/* Tooltip */}
+            {showTip && mode === "pencil" && (
+                <div className="absolute top-10 right-0 bg-gray-900 text-white text-xs px-2 py-1 rounded shadow-md">
+                    Edit category
+                </div>
+            )}
+
+            {showTip && mode === "minus" && (
+                <div className="absolute top-10 right-0 bg-gray-900 text-white text-xs px-2 py-1 rounded shadow-md">
+                    Unfollow Category
+                </div>
+            )}
+
+            {showTip && mode === "plus" && (
+                <div className="absolute top-10 right-0 bg-gray-900 text-white text-xs px-2 py-1 rounded shadow-md">
+                    Follow Category
+                </div>
+            )}
+        </div>
     );
 };
 export default FollowButton;