Fix tool tips for question mark icons #14084
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
Bundle ReportChanges will increase total bundle size by 1.28kB (0.01%) ⬆️. This is within the configured threshold ✅ Detailed changes
Affected Assets, Files, and Routes:view changes for bundle: sentry-docs-server-cjsAssets Changed:
Files in
App Routes Affected:
view changes for bundle: sentry-docs-client-array-pushAssets Changed:
Files in
|
codyde
reviewed
Jun 20, 2025
antonpirker
pushed a commit
that referenced
this pull request
Jun 24, 2025
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>
bitsandfoxes
pushed a commit
that referenced
this pull request
Jul 3, 2025
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>
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Tooltips were not appearing in Firefox 139.0 for question mark icons due to a known compatibility issue with Radix UI's
Tooltip.Triggerwhen using theasChildprop, affecting Firefox's event handling and CSS animations.To resolve this:
src/components/onboarding/index.tsx:onMouseEnter,onMouseLeave,onFocus, andonBlurhandlers were added toTooltip.Triggerto manually manage thedata-stateattribute, ensuring Firefox correctly recognizes the tooltip's active state.QuestionMarkCircledIconwas wrapped in a<span>withrole="button",tabIndex={0}, andaria-labelfor improved accessibility and keyboard navigation.delayDuration={300}was added toTooltip.Provider, andalign="center",side="top"toTooltip.Contentfor consistent timing and positioning.src/components/onboarding/styles.module.scss:z-index,position,pointer-events,-moz-user-select,-webkit-user-select,-moz-animation-duration,-moz-animation-timing-function) were added to.TooltipContent.-moz-animation-namewas applied to existing animation rules, and-moz-keyframeswere 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.