Skip to content

fix(tooltip): make tooltip popups click-through so they don't block underlying controls#1272

Open
tellaho wants to merge 1 commit into
mainfrom
tho/composer-tooltip-pointer-events
Open

fix(tooltip): make tooltip popups click-through so they don't block underlying controls#1272
tellaho wants to merge 1 commit into
mainfrom
tho/composer-tooltip-pointer-events

Conversation

@tellaho

@tellaho tellaho commented Jun 25, 2026

Copy link
Copy Markdown
Collaborator

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 TooltipContent renders 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-none to the shared TooltipContent so 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 49 TooltipContent usages 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 via className through tailwind-merge.

This satisfies the WCAG content-on-hover-or-focus constraints: pointer-events-none only 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-none to the shared TooltipContent class string so the tooltip Portal popup is click-through app-wide, while remaining overridable by a caller's className.

Reproduction Steps

  1. Open a channel in the desktop app and bring up the message composer.
  2. Hover (or focus) one of the composer's action buttons (Mention, Attach, Spoiler, Formatting) so its tooltip appears over the textarea.
  3. Click on the textarea region covered by the tooltip — before this change the click was eaten; now the field receives the click and the tooltip is click-through.
  4. Tab to a button to confirm focus still reveals the tooltip (focus-to-show preserved).

Screenshots/Demos

Click-through confirmed during review — tooltip renders over the textarea and the field shows through it:

composer tooltip click-through

…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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant