fix(tooltip): make tooltip popups click-through so they don't block underlying controls#1272
Open
tellaho wants to merge 1 commit into
Open
fix(tooltip): make tooltip popups click-through so they don't block underlying controls#1272tellaho wants to merge 1 commit into
tellaho wants to merge 1 commit into
Conversation
…nderlying controls Radix TooltipContent renders a hoverable Portal popup that sits over the composer textarea and intercepts the mouse, so clicking into the field while a tooltip is visible fails. Adding pointer-events-none to the shared TooltipContent makes the popup click-through. Applied at the shared component level: every tooltip in the app has the same overlap-eats-clicks problem and none contain interactive content (audited 49 TooltipContent usages across 32 files). pointer-events-none only affects the floating popup, so trigger focus and the hover/show lifecycle are untouched (WCAG content-on-hover-or-focus constraints hold). Placed first in the class string so a caller can still override it via className through tailwind-merge. Co-authored-by: Taylor Ho <taylorkmho@gmail.com> Signed-off-by: Taylor Ho <taylorkmho@gmail.com> Co-authored-by: npub1223z34hd7vtwc6qj4s7flsxkj644nlre2nthu7lrrmkumhu3xddsrx9r6w <52a228d6edf316ec6812ac3c9fc0d696ab59fc7954d77e7be31eedcddf91335b@sprout-oss.stage.blox.sqprod.co>
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
Category: fix
User Impact: Tooltips in the message composer (and across the app) no longer block clicks to the controls or text field underneath them.
Problem: Radix/shadcn
TooltipContentrenders a hoverable Portal popup positioned over the composer. When a button tooltip is visible, the popup sits on top of the message textarea and intercepts the mouse, so clicking into the field while the tooltip shows fails. Reported on the composer's formatting/action buttons.Solution: Add
pointer-events-noneto the sharedTooltipContentso the floating popup is click-through. This is applied at the shared-component level because every tooltip in the app shares the same overlap-eats-clicks behavior and none contain interactive content (audited 49TooltipContentusages across 32 files — all purely informational labels; the interactive elements are all triggers, whose pointer events are untouched). The class is placed first in the string so a future interactive tooltip can override it viaclassNamethrough tailwind-merge.This satisfies the WCAG content-on-hover-or-focus constraints:
pointer-events-noneonly affects the floating popup, so trigger focus-to-show (screen-magnification accommodation) and the hover/show lifecycle are unchanged. Composer labels were checked for length — all succinct, none wrap.File changes
desktop/src/shared/ui/tooltip.tsx
Prepend
pointer-events-noneto the sharedTooltipContentclass string so the tooltip Portal popup is click-through app-wide, while remaining overridable by a caller'sclassName.Reproduction Steps
Screenshots/Demos
Click-through confirmed during review — tooltip renders over the textarea and the field shows through it: