add tooltip for configuring a benefit

Author: earth-walker

builder-frontend/src/components/project/manageBenefits/configureBenefit/ConfigureBenefit.tsx

@@ -9,6 +9,7 @@ import { fetchPublicChecks, fetchUserDefinedChecks } from "@/api/check";
 
 import type { EligibilityCheckListMode } from "./EligibilityCheckListView";
 import type { EligibilityCheck, ParameterValues } from "@/types";
+import Tooltip from "@/components/shared/Tooltip";
 
 const ConfigureBenefit = ({
   screenerId,
@@ -26,7 +27,7 @@ const ConfigureBenefit = ({
     createSignal<EligibilityCheckListMode>("public");
   const [publicChecks] = createResource<EligibilityCheck[]>(fetchPublicChecks);
   const [userDefinedChecks] = createResource<EligibilityCheck[]>(() =>
-    fetchUserDefinedChecks(false)
+    fetchUserDefinedChecks(false),
   );
 
   const onRemoveEligibilityCheck = (checkId: string) => {
@@ -42,9 +43,25 @@ const ConfigureBenefit = ({
       <Show when={benefit().id !== undefined && !initialLoadStatus.loading()}>
         <div class="p-5">
           <div class="flex mb-4">
-            <div class="text-3xl font-bold tracking-wide">
-              Configure Benefit:{" "}
-              {benefit() ? benefit().name : "No Benefit Found"}
+            <div class="flex flex-row gap-2 items-baseline">
+              <div class="text-3xl font-bold tracking-wide">
+                Configure Benefit:{" "}
+                {benefit() ? benefit().name : "No Benefit Found"}
+              </div>
+              <Tooltip>
+                <p>
+                  The Configure Benefit page is where you define the rules that
+                  determine whether a user qualifies for a specific benefit.
+                </p>
+                <p>
+                  <a
+                    href="https://bdt-docs.web.app/user-guide/#4-configuring-a-benefit"
+                    target="_blank"
+                  >
+                    Read about configuring a benefit in the docs
+                  </a>
+                </p>
+              </Tooltip>
             </div>
             <div class="ml-auto">
               <div
@@ -92,11 +109,11 @@ const ConfigureBenefit = ({
                             onRemoveEligibilityCheck(checkConfig.checkId)
                           }
                           updateCheckConfigParams={(
-                            newCheckData: ParameterValues
+                            newCheckData: ParameterValues,
                           ) => {
                             actions.updateCheckConfigParams(
                               checkConfig.checkId,
-                              newCheckData
+                              newCheckData,
                             );
                           }}
                         />