HoverCard closes when moving pointer across gutter gap between trigger and content

[honggiang17tb]

Hi, thanks for the great work on Ark UI/Zag.

I'm using @ark-ui/react@5.37.2, which depends on @zag-js/hover-card@1.41.2.

I noticed an interaction issue with HoverCard when using positioning.gutter. The gutter visually looks good because it creates spacing between the trigger and the floating content, but when the user moves the pointer from the trigger to the content through that gap, the hover card closes because the pointer briefly leaves both the trigger and content.

Reproduction

import { HoverCard } from "@ark-ui/react"

export function Example() {
  return (
    <HoverCard.Root
      openDelay={10}
      closeDelay={10}
      positioning={{ placement: "bottom-start", gutter: 8 }}
    >
      <HoverCard.Trigger>
        User
      </HoverCard.Trigger>

      <HoverCard.Positioner>
        <HoverCard.Content>
          <a href="/profile">Profile</a>
          <a href="/settings">Settings</a>
        </HoverCard.Content>
      </HoverCard.Positioner>
    </HoverCard.Root>
  )
}
Current behavior
When moving the mouse from the trigger to the content, the pointer crosses the 8px gutter. During that moment, the pointer is not over the trigger or the content, so the hover card closes.
This makes gutter difficult to use for interactive hover cards unless closeDelay is increased.
Expected behavior
There should be a way to preserve the visual gutter while allowing the user to safely move the pointer from the trigger to the content.
Possible solutions could be:
- Add support for a "safe polygon" style interaction similar to Floating UI's safePolygon.
- Add an option to treat the gutter area as an interactive hover bridge.
- Expose a prop or recommended pattern for creating a hover-safe gap without relying on closeDelay.
Why increasing closeDelay is not ideal
Increasing closeDelay helps, but it changes the close behavior globally. It makes the hover card feel less responsive when the user intentionally moves away. In this case the desired behavior is only to tolerate the physical gap between trigger and content, not delay all closes.
Environment
- @ark-ui/react: 5.37.2
- @zag-js/hover-card: 1.41.2
- React: 19.2.4
- Next.js: 16.2.7
Thanks!