[popover] More forgiving hover traversal across a small gap
- Dominant language
- TypeScript
- Stars
- 10.9k
- Forks
- 543
- Avg merge
- 1d 20h
- Merged PRs (30d)
- 101
Description
Is there a supported way to make pointer traversal across a small gap more forgiving when a hover trigger is wider than its popup?
## Desired interaction

For a wide button or row that reveals a narrower popup, we'd like users to be able to move slowly or briefly pause within the small gap without losing the popup.
One possible approach is to let the protected rectangular bridge across the gap span the wider element, while keeping the visible layout unchanged.
I understand why this might be undesirable as a default. [Floating UI #2321](https://github.com/floating-ui/floating-ui/issues/2321) describes the opposite problem with a much larger gap.
**Example**
https://codesandbox.io/p/sandbox/dfp2jg
1. Hover near the right edge of the trigger.
2. Move slowly down into the gap, then left toward the popup.
3. Compare with moving straight down from the trigger's center.
## Existing options
Increasing `closeDelay` gives users more time, but also delays dismissal after they move away.
An invisible CSS bridge could cover the gap, but its hit area may intercept hover or clicks intended for underlying elements.
Contributor guide
Research direction
Start at the popover hover-protection implementation and reproduce the CodeSandbox traversal path: move from the trigger's edge slowly through the gap toward the popup. Compare the current narrow bridge with the requested wider bridge, while checking that existing closeDelay behavior and underlying hover or click targets remain unaffected; done means the wider-trigger case stays open without changing visible layout.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- design, frontend
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Active
- Clarity
- Mostly clear
- Newbie friendliness
- 48/100