Skip to content

fix: tooltip overflow at window boundaries#538

Merged
cjpais merged 1 commit intocjpais:mainfrom
turfle:fix/tooltip-window-boundary
Jan 10, 2026
Merged

fix: tooltip overflow at window boundaries#538
cjpais merged 1 commit intocjpais:mainfrom
turfle:fix/tooltip-window-boundary

Conversation

@turfle
Copy link
Copy Markdown
Contributor

@turfle turfle commented Jan 6, 2026

Before Submitting This PR

Please confirm you have done the following:

Human Written Description

Tooltips were clipped by parent overflow-hidden containers, making text unreadable at window edges. Fixed by using a React Portal to render tooltips at the document root, so they always appear fully visible.

Related Issues/Discussions

Testing

  • Verified tooltips no longer overflow window boundaries (top, bottom, left, right edges)
  • Tested tooltip flip behavior when insufficient space above/below target
  • Confirmed smooth fade-in animation without glitchy position jumps
  • Build passes successfully

Screenshots/Videos (if applicable)

Before

image

After

image

Technical Summary

Problem

Tooltips were rendered inside containers with overflow-hidden, causing them to be clipped at window boundaries.

Solution

  • Extract tooltip into standalone Tooltip.tsx component using React Portal (createPortal)
  • Render tooltips directly to document.body to escape overflow constraints
  • Add smart positioning with automatic flip when near viewport edges
  • Add horizontal boundary clamping with dynamic arrow positioning

Changes

File Description
src/components/ui/Tooltip.tsx New reusable tooltip component with portal-based rendering
src/components/ui/SettingContainer.tsx Import extracted Tooltip, remove inline implementation
src/components/ui/index.ts Export new Tooltip component

@cjpais
Copy link
Copy Markdown
Owner

cjpais commented Jan 6, 2026

omg thank you, im excited to review this code. this has been bugging me for ages but other higher priority issues have taken my attention!

@cjpais cjpais merged commit 415d0fa into cjpais:main Jan 10, 2026
2 checks passed
h0lybyte added a commit to KBVE/Handy that referenced this pull request Jan 12, 2026
…, and UI improvements

Merged upstream features:
- feat: add Czech translation (cjpais#568)
- fix: keybinding changes failing silently due to incorrect key ordering (cjpais#524)
- fix: improve apple intelligence ui and add reusable alert component (cjpais#517)
- Fix race condition when toggling transcription via SIGUSR2 (cjpais#560)
- feat(linux): add ydotool support for text input (cjpais#557)
- feat: add Moonshine Base speech recognition model (cjpais#556)
- Prevent highlight and selection cursor hover on UI text items (cjpais#541)
- feat(ui): add reusable Tooltip component and integrate with settings (cjpais#538)
- PR guidelines for AI
- dont allow package-lock with a bun project for now

Conflicts resolved:
- src-tauri/src/shortcut.rs: Kept KBVE filler detection commands, adopted upstream's improved doc comment
- src/bindings.ts: Merged KBVE types (Discord, Memory, Filler) with upstream's Moonshine engine type
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.

2 participants