Tooltip for arg descriptions

package.json

@@ -24,6 +24,7 @@
     "react-dom": "^17.0.2",
     "react-dropzone": "^10.2.1",
     "react-hot-loader": "^4.13.0",
+    "react-icons": "^5.3.0",
     "react-query": "^3.19.2",
     "react-resize-detector": "^6.1.0",
     "react-router-dom": "^5.2.0",

src/tapis-ui/_common/FieldWrapperFormik/fields/FormikCheck.module.scss

@@ -6,4 +6,10 @@
 .check-group {
   display: flex;
   align-items: flex-end;
-}
+}
+
+.info-icon {
+  position: relative;
+  margin-left: 8px;
+  top: -5px
+}

src/tapis-ui/_common/FieldWrapperFormik/fields/FormikCheck.tsx

@@ -1,20 +1,10 @@
-import { FieldInputProps, Field, useField } from "formik";
+import { useField } from "formik";
 import { FormikInputProps } from ".";
 import { Input, FormText, FormGroup, Label, Tooltip } from "reactstrap";
-// import { FaInfoCircle } from "react-icons/fa"; // Use an info icon
-import { Icon } from "tapis-ui/_common";
-import React, { useState } from "react";
+import { IoInformationCircleOutline } from "react-icons/io5";
+import React, { useState, useRef } from "react";
 import styles from "./FormikCheck.module.scss";
 
-interface FormikCheckProps {
-  name: string;
-  label: string;
-  required?: boolean;
-  description?: string;
-  tooltipText?: string; // Add a prop for tooltip text
-  labelClassName?: string;
-}
-
 const FormikCheck: React.FC<FormikInputProps> = ({
   name,
   label,
@@ -26,9 +16,18 @@ const FormikCheck: React.FC<FormikInputProps> = ({
 }: FormikInputProps) => {
   const [field, meta] = useField({ name, type: "checkbox" });
   const [tooltipOpen, setTooltipOpen] = useState(false);
-  const toggleTooltip = () => setTooltipOpen(!tooltipOpen);
+  const iconWrapperRef = useRef<HTMLDivElement>(null);
+
+  // Functions to handle hover
+  const handleMouseEnter = () => {
+    console.log("Mouse entered, tooltip should open");
+    setTooltipOpen(true);
+  };
 
-  const infoIconId = `${name}-info-icon`; // Unique ID for the tooltip
+  const handleMouseLeave = () => {
+    console.log("Mouse left, tooltip should close");
+    setTooltipOpen(false);
+  };
 
   return (
     <FormGroup check>
@@ -49,21 +48,19 @@ const FormikCheck: React.FC<FormikInputProps> = ({
           {label}
         </Label>
 
-        {/* Info icon with tooltip */}
-        {/*<FaInfoCircle id={infoIconId} className={styles["info-icon"]} />*/}
-        <Icon name={"script"} />
-        {tooltipText && (
-          <Tooltip
-            placement="top"
-            isOpen={tooltipOpen}
-            target={infoIconId}
-            toggle={toggleTooltip}
-          >
-            Pineapples
-            {/*{tooltipText}*/}
-          </Tooltip>
-        )}
+        <div
+          ref={iconWrapperRef}
+          onMouseEnter={handleMouseEnter}
+          onMouseLeave={handleMouseLeave}
+        >
+          <IoInformationCircleOutline className={styles["info-icon"]} />
+        </div>
+
+        <Tooltip placement="top" isOpen={tooltipOpen} target={iconWrapperRef}>
+          {tooltipText || "This is the tooltip content"}
+        </Tooltip>
       </div>
+
       {description && (
         <FormText
           className={`form-field__help ${styles.nospace}`}

src/tapis-ui/components/jobs/JobLauncher/steps/AppArgs.tsx

@@ -21,11 +21,11 @@ type ArgFieldProps = {
 export const ArgField: React.FC<ArgFieldProps> = ({
   name,
   inputMode,
-  notes,
+  // notes,
 }) => {
-  const [nameField] = useField(name);
+  const [nameField] = useField(`${name}.name`);
   const [descriptionField] = useField(`${name}.description`);
-  const [notesField] = useField(`${name}.notes`);
+  // const [notesField] = useField(`${name}.notes`);
 
   // console.log(
   //   `Entire arg object for ${name}:`,
@@ -41,9 +41,10 @@ export const ArgField: React.FC<ArgFieldProps> = ({
         <FormikCheck
           name={`${name}.include`} // Toggles the include parameter for flag arguments
           required={false}
-          label={descriptionField.value}
+          label={nameField.value}
           description=""
           labelClassName={fieldArrayStyles["checkbox-label"]}
+          tooltipText={descriptionField.value}
         />
       ) : (
         <FormikInput