diff --git a/src/components/ai-recruiter/AIRecruiterForm.tsx b/src/components/ai-recruiter/AIRecruiterForm.tsx
index de59c8bc..d2c22903 100644
--- a/src/components/ai-recruiter/AIRecruiterForm.tsx
+++ b/src/components/ai-recruiter/AIRecruiterForm.tsx
@@ -41,6 +41,7 @@ import {
AccordionItem,
AccordionTrigger,
} from "@/components/ui/accordion";
+import { FieldTooltip } from "@/components/ui/field-tooltip";
export const formSchema = z.object({
audienceBrief: z.string().min(10, {
@@ -169,17 +170,20 @@ export default function AIRecruiterForm({ onSubmit, isGenerating }: AIRecruiterF
name="audienceBrief"
render={({ field }) => (
- Audience Brief
+
+ Audience Brief
+
+
-
-
- Provide details about the demographics, behaviors, and attitudes you want to explore
-
)}
@@ -190,17 +194,20 @@ export default function AIRecruiterForm({ onSubmit, isGenerating }: AIRecruiterF
name="researchObjective"
render={({ field }) => (
- Research Objective
+
+ Research Objective
+
+
-
-
- Specify your research focus to generate more targeted persona goals, frustrations, and scenarios
-
)}
diff --git a/src/components/ui/field-tooltip.tsx b/src/components/ui/field-tooltip.tsx
new file mode 100644
index 00000000..f7963597
--- /dev/null
+++ b/src/components/ui/field-tooltip.tsx
@@ -0,0 +1,45 @@
+import * as React from "react"
+import { useState } from "react"
+import { HelpCircle } from "lucide-react"
+import {
+ Popover,
+ PopoverContent,
+ PopoverTrigger,
+} from "@/components/ui/popover"
+
+interface FieldTooltipProps {
+ content: string
+ example: string
+}
+
+export function FieldTooltip({ content, example }: FieldTooltipProps) {
+ const [showExample, setShowExample] = useState(false)
+
+ return (
+
+
+
+
+
+ {content}
+
+ {showExample && (
+
+ {example}
+
+ )}
+
+
+ )
+}