Fix tool tips for question mark icons (#14084)

Tooltips were not appearing in Firefox 139.0 for question mark icons due
to a known compatibility issue with Radix UI's `Tooltip.Trigger` when
using the `asChild` prop, affecting Firefox's event handling and CSS
animations.

To resolve this:
*   In `src/components/onboarding/index.tsx`:
* Explicit `onMouseEnter`, `onMouseLeave`, `onFocus`, and `onBlur`
handlers were added to `Tooltip.Trigger` to manually manage the
`data-state` attribute, ensuring Firefox correctly recognizes the
tooltip's active state.
* The `QuestionMarkCircledIcon` was wrapped in a `<span>` with
`role="button"`, `tabIndex={0}`, and `aria-label` for improved
accessibility and keyboard navigation.
* `delayDuration={300}` was added to `Tooltip.Provider`, and
`align="center"`, `side="top"` to `Tooltip.Content` for consistent
timing and positioning.
*   In `src/components/onboarding/styles.module.scss`:
* Firefox-specific CSS properties (`z-index`, `position`,
`pointer-events`, `-moz-user-select`, `-webkit-user-select`,
`-moz-animation-duration`, `-moz-animation-timing-function`) were added
to `.TooltipContent`.
* `-moz-animation-name` was applied to existing animation rules, and
`-moz-keyframes` were defined for all slide animations to ensure proper
rendering and animation in Firefox.

These changes ensure tooltips now appear correctly in Firefox 139.0,
while maintaining cross-browser compatibility and accessibility
standards.

---------

Co-authored-by: Cursor Agent <[email protected]>
Co-authored-by: getsantry[bot] <66042841+getsantry[bot]@users.noreply.github.com>

Author: 3 people

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);
+  }
+}