Merge pull request #351 from CodeForPhilly/Add-links-to-tooltip-component

Refactor: Rename QuestionTooltip to Tooltip with interactive popover support

Author: jav1anpry5ce

…rc/components/shared/QuestionTooltip.tsx …ontend/src/components/shared/Tooltip.tsxbuilder-frontend/src/components/shared/QuestionTooltip.tsx renamed to builder-frontend/src/components/shared/Tooltip.tsx builder-frontend/src/components/shared/QuestionTooltip.tsx renamed to builder-frontend/src/components/shared/Tooltip.tsx

@@ -1,4 +1,4 @@
-import { createSignal, JSX, Show } from "solid-js";
+import { createSignal, JSX, onCleanup, Show } from "solid-js";
 import QuestionMarkIcon from "../icon/QuestionMarkIcon";
 
 export enum TooltipAlignment {
@@ -8,8 +8,10 @@ export enum TooltipAlignment {
 }
 
 interface TooltipProps {
-  text: string;
-  children?: JSX.Element;
+  /** Optional trigger label – defaults to the question-mark icon */
+  label?: JSX.Element;
+  /** Popover content (can include links, rich JSX, etc.) */
+  children: JSX.Element;
 }
 
 export default function QuestionTooltip(props: TooltipProps) {
@@ -21,6 +23,12 @@ export default function QuestionTooltip(props: TooltipProps) {
   }>({ x: 0, align: TooltipAlignment.Center, containerWidth: 0 });
 
   let containerRef: HTMLDivElement | undefined;
+  let hideTimeout: ReturnType<typeof setTimeout> | undefined;
+
+  // Clean up any pending timeout when the component unmounts
+  onCleanup(() => {
+    if (hideTimeout) clearTimeout(hideTimeout);
+  });
 
   const determineAlignment = (rect: DOMRect): TooltipAlignment => {
     const tooltipWidth = 256; // w-64 is 16rem = 256px
@@ -41,7 +49,11 @@ export default function QuestionTooltip(props: TooltipProps) {
     }
   };
 
-  const handleMouseEnter = () => {
+  const show = () => {
+    if (hideTimeout) {
+      clearTimeout(hideTimeout);
+      hideTimeout = undefined;
+    }
     if (containerRef) {
       const rect = containerRef.getBoundingClientRect();
       const align = determineAlignment(rect);
@@ -50,39 +62,42 @@ export default function QuestionTooltip(props: TooltipProps) {
     setIsVisible(true);
   };
 
-  const handleMouseLeave = () => setIsVisible(false);
+  const hide = () => {
+    // Small delay so the user can move their cursor into the popover
+    hideTimeout = setTimeout(() => setIsVisible(false), 150);
+  };
 
   return (
     <div
       ref={containerRef}
       class="relative inline-flex items-center justify-center cursor-help"
-      onMouseEnter={handleMouseEnter}
-      onMouseLeave={handleMouseLeave}
-      onFocus={handleMouseEnter}
-      onBlur={handleMouseLeave}
+      onMouseEnter={show}
+      onMouseLeave={hide}
+      onFocusIn={show}
+      onFocusOut={(e: FocusEvent) => {
+        // Only hide if focus is leaving the entire tooltip container
+        if (!containerRef?.contains(e.relatedTarget as Node)) {
+          hide();
+        }
+      }}
       tabIndex={0}
       aria-label="More information"
     >
-      <Show
-        when={props.children}
-        fallback={
-          <QuestionMarkIcon class="size-5 text-gray-500 hover:text-gray-700 transition-colors" />
-        }
-      >
-        {props.children}
-      </Show>
+      {props.label ?? (
+        <QuestionMarkIcon class="size-5 text-gray-500 hover:text-gray-700 transition-colors" />
+      )}
 
       <Show when={isVisible()}>
         <div
-          class={`absolute z-50 w-64 p-3 mt-2 text-sm text-gray-800 bg-white border border-gray-200 rounded-lg shadow-lg top-full pointer-events-none fade-in ${
+          class={`absolute z-50 w-64 p-3 mt-2 text-sm text-gray-800 bg-white border border-gray-200 rounded-lg shadow-lg top-full fade-in ${
             position().align === TooltipAlignment.Center
               ? "left-1/2 -translate-x-1/2"
               : position().align === TooltipAlignment.Left
                 ? "left-0"
                 : "right-0"
           }`}
         >
-          {props.text}
+          {props.children}
           {/* Decorative arrow pointing up */}
           <div
             class={`absolute w-3 h-3 bg-white border-t border-l border-gray-200 rotate-45 -top-[7px] ${