fix: pending tooltip click triggers field (#1800)

Makes it so clicking on the pending field tooltip will trigger the
underlying field it refers to on click if the field can be found within
the DOM.

apps/remix/app/components/general/document-signing/document-signing-field-container.tsx

@@ -166,7 +166,7 @@ export const DocumentSigningFieldContainer = ({
             </TooltipTrigger>
 
             <TooltipContent
-              className="border-0 bg-orange-300 fill-orange-300 font-bold text-orange-900"
+              className="border-0 bg-orange-300 fill-orange-300 text-orange-900"
               sideOffset={2}
             >
               {tooltipText && <p>{tooltipText}</p>}

packages/ui/components/field/field-tooltip.tsx

@@ -38,6 +38,14 @@ interface FieldToolTipProps extends VariantProps<typeof tooltipVariants> {
 export function FieldToolTip({ children, color, className = '', field }: FieldToolTipProps) {
   const coords = useFieldPageCoords(field);
 
+  const onTooltipContentClick = () => {
+    const $fieldEl = document.querySelector<HTMLButtonElement>(`#field-${field.id} > button`);
+
+    if ($fieldEl) {
+      $fieldEl.click();
+    }
+  };
+
   return createPortal(
     <div
       className={cn('pointer-events-none absolute')}
@@ -52,7 +60,11 @@ export function FieldToolTip({ children, color, className = '', field }: FieldTo
         <Tooltip delayDuration={0} open={!field.inserted || !field.fieldMeta}>
           <TooltipTrigger className="absolute inset-0 w-full"></TooltipTrigger>
 
-          <TooltipContent className={tooltipVariants({ color, className })} sideOffset={2}>
+          <TooltipContent
+            className={tooltipVariants({ color, className })}
+            sideOffset={2}
+            onClick={onTooltipContentClick}
+          >
             {children}
             <TooltipArrow />
           </TooltipContent>