Fixes bug where help icon showed up beneath the form label. I believe the labelIcon prop was added in a recent update of PF and is what we should be using.

awx/ui_next/src/components/FormField/FormField.jsx

@@ -31,8 +31,10 @@ function FormField(props) {
           isRequired={isRequired}
           validated={isValid ? 'default' : 'error'}
           label={label}
+          labelIcon={
+            <FieldTooltip content={tooltip} maxWidth={tooltipMaxWidth} />
+          }
         >
-          <FieldTooltip content={tooltip} maxWidth={tooltipMaxWidth} />
           <TextArea
             id={id}
             isRequired={isRequired}
@@ -53,8 +55,10 @@ function FormField(props) {
           isRequired={isRequired}
           validated={isValid ? 'default' : 'error'}
           label={label}
+          labelIcon={
+            <FieldTooltip content={tooltip} maxWidth={tooltipMaxWidth} />
+          }
         >
-          <FieldTooltip content={tooltip} maxWidth={tooltipMaxWidth} />
           <TextInput
             id={id}
             isRequired={isRequired}

awx/ui_next/src/components/HostForm/HostForm.jsx

@@ -25,6 +25,13 @@ const InventoryLookupField = withI18n()(({ i18n, host }) => {
   return (
     <FormGroup
       label={i18n._(t`Inventory`)}
+      labelIcon={
+        <FieldTooltip
+          content={i18n._(
+            t`Select the inventory that this host will belong to.`
+          )}
+        />
+      }
       isRequired
       fieldId="inventory-lookup"
       validated={
@@ -32,9 +39,6 @@ const InventoryLookupField = withI18n()(({ i18n, host }) => {
       }
       helperTextInvalid={inventoryMeta.error}
     >
-      <FieldTooltip
-        content={i18n._(t`Select the inventory that this host will belong to.`)}
-      />
       <InventoryLookup
         value={inventory}
         onBlur={() => inventoryHelpers.setTouched()}

awx/ui_next/src/components/LaunchPrompt/steps/OtherPromptsStep.jsx

@@ -101,13 +101,15 @@ function JobTypeField({ i18n }) {
     <FormGroup
       fieldId="propmt-job-type"
       label={i18n._(t`Job Type`)}
-      validated={isValid ? 'default' : 'error'}
+      labelIcon={
-    >
+        <FieldTooltip
-      <FieldTooltip
+          content={i18n._(t`For job templates, select run to execute the playbook.
-        content={i18n._(t`For job templates, select run to execute the playbook.
       Select check to only check playbook syntax, test environment setup,
       and report problems without executing the playbook.`)}
-      />
+        />
+      }
+      validated={isValid ? 'default' : 'error'}
+    >
       <AnsibleSelect
         id="prompt-job-type"
         data={options}
@@ -134,11 +136,13 @@ function VerbosityField({ i18n }) {
       fieldId="prompt-verbosity"
       validated={isValid ? 'default' : 'error'}
       label={i18n._(t`Verbosity`)}
-    >
+      labelIcon={
-      <FieldTooltip
+        <FieldTooltip
-        content={i18n._(t`Control the level of output ansible
+          content={i18n._(t`Control the level of output ansible
           will produce as the playbook executes.`)}
-      />
+        />
+      }
+    >
       <AnsibleSelect
         id="prompt-verbosity"
         data={options}
@@ -180,8 +184,11 @@ function ShowChangesToggle({ i18n }) {
 function TagField({ id, name, label, tooltip }) {
   const [field, , helpers] = useField(name);
   return (
-    <FormGroup fieldId={id} label={label}>
+    <FormGroup
-      <FieldTooltip content={tooltip} />
+      fieldId={id}
+      label={label}
+      labelIcon={<FieldTooltip content={tooltip} />}
+    >
       <TagMultiSelect value={field.value} onChange={helpers.setValue} />
     </FormGroup>
   );

awx/ui_next/src/components/LaunchPrompt/steps/SurveyStep.jsx

@@ -98,8 +98,8 @@ function MultipleChoiceField({ question }) {
       isRequired={question.required}
       validated={isValid ? 'default' : 'error'}
       label={question.question_name}
+      labelIcon={<FieldTooltip content={question.question_description} />}
     >
-      <FieldTooltip content={question.question_description} />
       <AnsibleSelect
         id={id}
         isValid={isValid}
@@ -126,8 +126,8 @@ function MultiSelectField({ question }) {
       isRequired={question.required}
       validated={isValid ? 'default' : 'error'}
       label={question.question_name}
+      labelIcon={<FieldTooltip content={question.question_description} />}
     >
-      <FieldTooltip content={question.question_description} />
       <Select
         variant={SelectVariant.typeaheadMulti}
         id={id}

awx/ui_next/src/components/Lookup/CredentialLookup.jsx

@@ -86,9 +86,9 @@ function CredentialLookup({
       isRequired={required}
       validated={isValid ? 'default' : 'error'}
       label={label}
+      labelIcon={tooltip && <FieldTooltip content={tooltip} />}
       helperTextInvalid={helperTextInvalid}
     >
-      {tooltip && <FieldTooltip content={tooltip} />}
       <Lookup
         id="credential"
         header={label}

awx/ui_next/src/components/Lookup/InstanceGroupsLookup.jsx

@@ -54,9 +54,9 @@ function InstanceGroupsLookup(props) {
     <FormGroup
       className={className}
       label={i18n._(t`Instance Groups`)}
+      labelIcon={tooltip && <FieldTooltip content={tooltip} />}
       fieldId="org-instance-groups"
     >
-      {tooltip && <FieldTooltip content={tooltip} />}
       <Lookup
         id="org-instance-groups"
         header={i18n._(t`Instance Groups`)}

awx/ui_next/src/components/Lookup/ProjectLookup.jsx

@@ -65,8 +65,8 @@ function ProjectLookup({
       isRequired={required}
       validated={isValid ? 'default' : 'error'}
       label={i18n._(t`Project`)}
+      labelIcon={tooltip && <FieldTooltip content={tooltip} />}
     >
-      {tooltip && <FieldTooltip content={tooltip} />}
       <Lookup
         id="project"
         header={i18n._(t`Project`)}

awx/ui_next/src/screens/Application/shared/ApplicationForm.jsx

@@ -76,12 +76,14 @@ function ApplicationFormFields({
         }
         isRequired
         label={i18n._(t`Authorization grant type`)}
+        labelIcon={
+          <FieldTooltip
+            content={i18n._(
+              t`The Grant type the user must use for acquire tokens for this application`
+            )}
+          />
+        }
       >
-        <FieldTooltip
-          content={i18n._(
-            t`The Grant type the user must use for acquire tokens for this application`
-          )}
-        />
         <AnsibleSelect
           {...authorizationTypeField}
           isValid={
@@ -118,12 +120,14 @@ function ApplicationFormFields({
         }
         isRequired
         label={i18n._(t`Client type`)}
+        labelIcon={
+          <FieldTooltip
+            content={i18n._(
+              t`Set to Public or Confidential depending on how secure the client device is.`
+            )}
+          />
+        }
       >
-        <FieldTooltip
-          content={i18n._(
-            t`Set to Public or Confidential depending on how secure the client device is.`
-          )}
-        />
         <AnsibleSelect
           {...clientTypeField}
           isValid={!clientTypeMeta.touched || !clientTypeMeta.error}

awx/ui_next/src/screens/Credential/shared/CredentialFormFields/BecomeMethodField.jsx

@@ -35,12 +35,14 @@ function BecomeMethodField({ fieldOptions, isRequired }) {
       fieldId={`credential-${fieldOptions.id}`}
       helperTextInvalid={meta.error}
       label={fieldOptions.label}
+      labelIcon={
+        fieldOptions.help_text && (
+          <FieldTooltip content={fieldOptions.help_text} />
+        )
+      }
       isRequired={isRequired}
       isValid={!(meta.touched && meta.error)}
     >
-      {fieldOptions.help_text && (
-        <FieldTooltip content={fieldOptions.help_text} />
-      )}
       <Select
         maxHeight={200}
         variant={SelectVariant.typeahead}

awx/ui_next/src/screens/Credential/shared/CredentialFormFields/CredentialField.jsx

@@ -126,12 +126,14 @@ function CredentialField({ credentialType, fieldOptions, i18n }) {
         fieldId={`credential-${fieldOptions.id}`}
         helperTextInvalid={meta.error}
         label={fieldOptions.label}
+        labelIcon={
+          fieldOptions.help_text && (
+            <FieldTooltip content={fieldOptions.help_text} />
+          )
+        }
         isRequired={isRequired}
         isValid={isValid}
       >
-        {fieldOptions.help_text && (
-          <FieldTooltip content={fieldOptions.help_text} />
-        )}
         <CredentialInput
           credentialKind={credentialType.kind}
           fieldOptions={fieldOptions}

awx/ui_next/src/screens/Credential/shared/CredentialFormFields/CredentialPlugins/CredentialPluginField.jsx

@@ -127,10 +127,12 @@ function CredentialPluginField(props) {
           isRequired={isRequired}
           isValid={isValid}
           label={fieldOptions.label}
+          labelIcon={
+            fieldOptions.help_text && (
+              <FieldTooltip content={fieldOptions.help_text} />
+            )
+          }
         >
-          {fieldOptions.help_text && (
-            <FieldTooltip content={fieldOptions.help_text} />
-          )}
           <CredentialPluginInput {...props} />
         </FormGroup>
       )}

awx/ui_next/src/screens/Inventory/shared/InventorySourceForm.jsx

@@ -143,12 +143,14 @@ const InventorySourceFormFields = ({ sourceOptions, i18n }) => {
         <FormGroup
           fieldId="custom-virtualenv"
           label={i18n._(t`Ansible Environment`)}
-        >
+          labelIcon={
-          <FieldTooltip
+            <FieldTooltip
-            content={i18n._(t`Select the custom
+              content={i18n._(t`Select the custom
             Python virtual environment for this
             inventory source sync to run on.`)}
-          />
+            />
+          }
+        >
           <AnsibleSelect
             id="custom-virtualenv"
             data={[

awx/ui_next/src/screens/Inventory/shared/InventorySourceSubForms/SCMSubForm.jsx

@@ -91,12 +91,14 @@ const SCMSubForm = ({ i18n }) => {
         }
         isRequired
         label={i18n._(t`Inventory file`)}
-      >
+        labelIcon={
-        <FieldTooltip
+          <FieldTooltip
-          content={i18n._(t`Select the inventory file
+            content={i18n._(t`Select the inventory file
           to be synced by this source. You can select from
           the dropdown or enter a file within the input.`)}
-        />
+          />
+        }
+      >
         <AnsibleSelect
           {...sourcePathField}
           id="source_path"

awx/ui_next/src/screens/Inventory/shared/InventorySourceSubForms/SharedFields.jsx

@@ -49,17 +49,19 @@ export const RegionsField = withI18n()(({ i18n, regionOptions }) => {
       helperTextInvalid={meta.error}
       validated="default"
       label={i18n._(t`Regions`)}
+      labelIcon={
+        <FieldTooltip
+          content={
+            <Trans>
+              Click on the regions field to see a list of regions for your cloud
+              provider. You can select multiple regions, or choose
+              <em> All</em> to include all regions. Only Hosts associated with
+              the selected regions will be updated.
+            </Trans>
+          }
+        />
+      }
     >
-      <FieldTooltip
-        content={
-          <Trans>
-            Click on the regions field to see a list of regions for your cloud
-            provider. You can select multiple regions, or choose
-            <em> All</em> to include all regions. Only Hosts associated with the
-            selected regions will be updated.
-          </Trans>
-        }
-      />
       <Select
         variant={SelectVariant.typeaheadMulti}
         id="regions"
@@ -139,56 +141,58 @@ export const GroupByField = withI18n()(
         helperTextInvalid={meta.error}
         validated="default"
         label={i18n._(t`Only group by`)}
+        labelIcon={
+          <FieldTooltip
+            content={
+              <Trans>
+                Select which groups to create automatically. AWX will create
+                group names similar to the following examples based on the
+                options selected:
+                <br />
+                <br />
+                <ul>
+                  <li>
+                    Availability Zone: <strong>zones &raquo; us-east-1b</strong>
+                  </li>
+                  <li>
+                    Image ID: <strong>images &raquo; ami-b007ab1e</strong>
+                  </li>
+                  <li>
+                    Instance ID: <strong>instances &raquo; i-ca11ab1e </strong>
+                  </li>
+                  <li>
+                    Instance Type: <strong>types &raquo; type_m1_medium</strong>
+                  </li>
+                  <li>
+                    Key Name: <strong>keys &raquo; key_testing</strong>
+                  </li>
+                  <li>
+                    Region: <strong>regions &raquo; us-east-1</strong>
+                  </li>
+                  <li>
+                    Security Group:{' '}
+                    <strong>
+                      security_groups &raquo; security_group_default
+                    </strong>
+                  </li>
+                  <li>
+                    Tags: <strong>tags &raquo; tag_Name_host1</strong>
+                  </li>
+                  <li>
+                    VPC ID: <strong>vpcs &raquo; vpc-5ca1ab1e</strong>
+                  </li>
+                  <li>
+                    Tag None: <strong>tags &raquo; tag_none</strong>
+                  </li>
+                </ul>
+                <br />
+                If blank, all groups above are created except{' '}
+                <em>Instance ID</em>.
+              </Trans>
+            }
+          />
+        }
       >
-        <FieldTooltip
-          content={
-            <Trans>
-              Select which groups to create automatically. AWX will create group
-              names similar to the following examples based on the options
-              selected:
-              <br />
-              <br />
-              <ul>
-                <li>
-                  Availability Zone: <strong>zones &raquo; us-east-1b</strong>
-                </li>
-                <li>
-                  Image ID: <strong>images &raquo; ami-b007ab1e</strong>
-                </li>
-                <li>
-                  Instance ID: <strong>instances &raquo; i-ca11ab1e </strong>
-                </li>
-                <li>
-                  Instance Type: <strong>types &raquo; type_m1_medium</strong>
-                </li>
-                <li>
-                  Key Name: <strong>keys &raquo; key_testing</strong>
-                </li>
-                <li>
-                  Region: <strong>regions &raquo; us-east-1</strong>
-                </li>
-                <li>
-                  Security Group:{' '}
-                  <strong>
-                    security_groups &raquo; security_group_default
-                  </strong>
-                </li>
-                <li>
-                  Tags: <strong>tags &raquo; tag_Name_host1</strong>
-                </li>
-                <li>
-                  VPC ID: <strong>vpcs &raquo; vpc-5ca1ab1e</strong>
-                </li>
-                <li>
-                  Tag None: <strong>tags &raquo; tag_none</strong>
-                </li>
-              </ul>
-              <br />
-              If blank, all groups above are created except <em>Instance ID</em>
-              .
-            </Trans>
-          }
-        />
         <Select
           variant={SelectVariant.typeaheadMulti}
           id="group-by"
@@ -231,11 +235,13 @@ export const VerbosityField = withI18n()(({ i18n }) => {
       fieldId="verbosity"
       validated={isValid ? 'default' : 'error'}
       label={i18n._(t`Verbosity`)}
-    >
+      labelIcon={
-      <FieldTooltip
+        <FieldTooltip
-        content={i18n._(t`Control the level of output Ansible
+          content={i18n._(t`Control the level of output Ansible
         will produce for inventory source update jobs.`)}
-      />
+        />
+      }
+    >
       <AnsibleSelect
         id="verbosity"
         data={options}

awx/ui_next/src/screens/Project/shared/ProjectForm.jsx

@@ -259,11 +259,13 @@ function ProjectFormFields({
             <FormGroup
               fieldId="project-custom-virtualenv"
               label={i18n._(t`Ansible Environment`)}
-            >
+              labelIcon={
-              <FieldTooltip
+                <FieldTooltip
-                content={i18n._(t`Select the playbook to be executed by
+                  content={i18n._(t`Select the playbook to be executed by
                 this job.`)}
-              />
+                />
+              }
+            >
               <AnsibleSelect
                 id="project-custom-virtualenv"
                 data={[

awx/ui_next/src/screens/Project/shared/ProjectSubForms/ManualSubForm.jsx

@@ -83,12 +83,14 @@ const ManualSubForm = ({
         isRequired
         validated={!pathMeta.touched || !pathMeta.error ? 'default' : 'error'}
         label={i18n._(t`Playbook Directory`)}
-      >
+        labelIcon={
-        <FieldTooltip
+          <FieldTooltip
-          content={i18n._(t`Select from the list of directories found in
+            content={i18n._(t`Select from the list of directories found in
           the Project Base Path. Together the base path and the playbook
           directory provide the full path used to locate playbooks.`)}
-        />
+          />
+        }
+      >
         <AnsibleSelect
           {...pathField}
           id="local_path"

awx/ui_next/src/screens/Template/Survey/SurveyQuestionForm.jsx

@@ -29,16 +29,18 @@ function AnswerTypeField({ i18n }) {
   return (
     <FormGroup
       label={i18n._(t`Answer Type`)}
+      labelIcon={
+        <FieldTooltip
+          content={i18n._(
+            t`Choose an answer type or format you want as the prompt for the user.
+          Refer to the Ansible Tower Documentation for more additional
+          information about each option.`
+          )}
+        />
+      }
       isRequired
       fieldId="question-answer-type"
     >
-      <FieldTooltip
-        content={i18n._(
-          t`Choose an answer type or format you want as the prompt for the user.
-          Refer to the Ansible Tower Documentation for more additional
-          information about each option.`
-        )}
-      />
       <AnsibleSelect
         id="question-type"
         {...field}

awx/ui_next/src/screens/Template/shared/JobTemplateForm.jsx

@@ -298,10 +298,14 @@ function JobTemplateForm({
           }
           isRequired
           label={i18n._(t`Playbook`)}
+          labelIcon={
+            <FieldTooltip
+              content={i18n._(
+                t`Select the playbook to be executed by this job.`
+              )}
+            />
+          }
         >
-          <FieldTooltip
-            content={i18n._(t`Select the playbook to be executed by this job.`)}
-          />
           <PlaybookSelect
             projectId={projectField.value?.id}
             isValid={!playbookMeta.touched || !playbookMeta.error}
@@ -330,12 +334,17 @@ function JobTemplateForm({
               onError={setContentError}
             />
           </FieldWithPrompt>
-          <FormGroup label={i18n._(t`Labels`)} fieldId="template-labels">
+          <FormGroup
-            <FieldTooltip
+            label={i18n._(t`Labels`)}
-              content={i18n._(t`Optional labels that describe this job template,
+            labelIcon={
+              <FieldTooltip
+                content={i18n._(t`Optional labels that describe this job template,
                       such as 'dev' or 'test'. Labels can be used to group and filter
                       job templates and completed jobs.`)}
-            />
+              />
+            }
+            fieldId="template-labels"
+          >
             <LabelSelect
               value={labelsField.value}
               onChange={labels => labelsHelpers.setValue(labels)}

awx/ui_next/src/screens/Template/shared/WebhookSubForm.jsx

@@ -126,8 +126,10 @@ function WebhookSubForm({ i18n, templateType }) {
         fieldId="webhook_service"
         helperTextInvalid={webhookServiceMeta.error}
         label={i18n._(t`Webhook Service`)}
+        labelIcon={
+          <FieldTooltip content={i18n._(t`Select a webhook service.`)} />
+        }
       >
-        <FieldTooltip content={i18n._(t`Select a webhook service.`)} />
         <AnsibleSelect
           {...webhookServiceField}
           id="webhook_service"
@@ -162,13 +164,15 @@ function WebhookSubForm({ i18n, templateType }) {
           type="text"
           fieldId="jt-webhookURL"
           label={i18n._(t`Webhook URL`)}
+          labelIcon={
+            <FieldTooltip
+              content={i18n._(
+                t`Webhook services can launch jobs with this workflow job template by making a POST request to this URL.`
+              )}
+            />
+          }
           name="webhook_url"
         >
-          <FieldTooltip
-            content={i18n._(
-              t`Webhook services can launch jobs with this workflow job template by making a POST request to this URL.`
-            )}
-          />
           <TextInput
             id="t-webhookURL"
             aria-label={i18n._(t`Webhook URL`)}
@@ -178,13 +182,15 @@ function WebhookSubForm({ i18n, templateType }) {
         </FormGroup>
         <FormGroup
           label={i18n._(t`Webhook Key`)}
+          labelIcon={
+            <FieldTooltip
+              content={i18n._(
+                t`Webhook services can use this as a shared secret.`
+              )}
+            />
+          }
           fieldId="template-webhook_key"
         >
-          <FieldTooltip
-            content={i18n._(
-              t`Webhook services can use this as a shared secret.`
-            )}
-          />
           <InputGroup>
             <TextInput
               id="template-webhook_key"

awx/ui_next/src/screens/Template/shared/WorkflowJobTemplateForm.jsx

@@ -157,12 +157,17 @@ function WorkflowJobTemplateForm({
         </FieldWithPrompt>
       </FormColumnLayout>
       <FormFullWidthLayout>
-        <FormGroup label={i18n._(t`Labels`)} fieldId="template-labels">
+        <FormGroup
-          <FieldTooltip
+          label={i18n._(t`Labels`)}
-            content={i18n._(t`Optional labels that describe this job template,
+          labelIcon={
+            <FieldTooltip
+              content={i18n._(t`Optional labels that describe this job template,
                     such as 'dev' or 'test'. Labels can be used to group and filter
                     job templates and completed jobs.`)}
-          />
+            />
+          }
+          fieldId="template-labels"
+        >
           <LabelSelect
             value={labelsField.value}
             onChange={labels => labelsHelpers.setValue(labels)}