Fix tool tips for question mark icons

src/components/onboarding/index.tsx

@@ -320,14 +320,49 @@ export function OnboardingOptionButtons({
 
             {optionDetails[option.id].name}
             {optionDetails[option.id] && (
-              <Tooltip.Provider>
+              <Tooltip.Provider delayDuration={300}>
                 <Tooltip.Root>
-                  <Tooltip.Trigger asChild>
-                    <QuestionMarkCircledIcon fontSize={20} strokeWidth="2" />
+                  <Tooltip.Trigger
+                    asChild
+                    onMouseEnter={e => {
+                      // Explicit mouse enter handling for Firefox compatibility
+                      e.currentTarget.setAttribute('data-state', 'delayed-open');
+                    }}
+                    onMouseLeave={e => {
+                      // Explicit mouse leave handling for Firefox compatibility
+                      e.currentTarget.removeAttribute('data-state');
+                    }}
+                    onFocus={e => {
+                      // Ensure keyboard navigation works
+                      e.currentTarget.setAttribute('data-state', 'delayed-open');
+                    }}
+                    onBlur={e => {
+                      // Ensure keyboard navigation works
+                      e.currentTarget.removeAttribute('data-state');
+                    }}
+                  >
+                    <span
+                      role="button"
+                      tabIndex={0}
+                      aria-label={`Help: ${optionDetails[option.id].name}`}
+                      style={{
+                        display: 'inline-flex',
+                        alignItems: 'center',
+                        cursor: 'help',
+                        outline: 'none',
+                      }}
+                    >
+                      <QuestionMarkCircledIcon fontSize={20} strokeWidth="2" />
+                    </span>
                   </Tooltip.Trigger>
                   <Tooltip.Portal>
                     <Theme accentColor="iris">
-                      <Tooltip.Content className={styles.TooltipContent} sideOffset={5}>
+                      <Tooltip.Content
+                        className={styles.TooltipContent}
+                        sideOffset={5}
+                        align="center"
+                        side="top"
+                      >
                         {optionDetails[option.id].description}
                         <Tooltip.Arrow className={styles.TooltipArrow} />
                       </Tooltip.Content>

src/components/onboarding/styles.module.scss

@@ -22,6 +22,18 @@
   box-shadow: var(--shadow-6);
   animation-duration: 100ms;
   animation-timing-function: ease-in;
+  /* Firefox-specific fixes */
+  z-index: 9999;
+  position: relative;
+  pointer-events: none;
+
+  /* Ensure proper rendering in Firefox */
+  -moz-user-select: none;
+  -webkit-user-select: none;
+
+  /* Firefox animation support */
+  -moz-animation-duration: 100ms;
+  -moz-animation-timing-function: ease-in;
 }
 
 .TooltipTitle {
@@ -35,15 +47,19 @@
 
 .TooltipContent[data-state='delayed-open'][data-side='top'] {
   animation-name: slideDownAndFade;
+  -moz-animation-name: slideDownAndFade;
 }
 .TooltipContent[data-state='delayed-open'][data-side='right'] {
   animation-name: slideLeftAndFade;
+  -moz-animation-name: slideLeftAndFade;
 }
 .TooltipContent[data-state='delayed-open'][data-side='bottom'] {
   animation-name: slideUpAndFade;
+  -moz-animation-name: slideUpAndFade;
 }
 .TooltipContent[data-state='delayed-open'][data-side='left'] {
   animation-name: slideRightAndFade;
+  -moz-animation-name: slideRightAndFade;
 }
 
 .TooltipArrow {
@@ -93,3 +109,56 @@
     transform: translateX(0);
   }
 }
+
+/* Firefox-specific keyframe animations */
+@-moz-keyframes slideUpAndFade {
+  from {
+    opacity: 0;
+    -moz-transform: translateY(2px);
+    transform: translateY(2px);
+  }
+  to {
+    opacity: 1;
+    -moz-transform: translateY(0);
+    transform: translateY(0);
+  }
+}
+
+@-moz-keyframes slideRightAndFade {
+  from {
+    opacity: 0;
+    -moz-transform: translateX(-2px);
+    transform: translateX(-2px);
+  }
+  to {
+    opacity: 1;
+    -moz-transform: translateX(0);
+    transform: translateX(0);
+  }
+}
+
+@-moz-keyframes slideDownAndFade {
+  from {
+    opacity: 0;
+    -moz-transform: translateY(-2px);
+    transform: translateY(-2px);
+  }
+  to {
+    opacity: 1;
+    -moz-transform: translateY(0);
+    transform: translateY(0);
+  }
+}
+
+@-moz-keyframes slideLeftAndFade {
+  from {
+    opacity: 0;
+    -moz-transform: translateX(2px);
+    transform: translateX(2px);
+  }
+  to {
+    opacity: 1;
+    -moz-transform: translateX(0);
+    transform: translateX(0);
+  }
+}