Popover: hover area overlaps surroundings if content width is too big

[Yves852]

Environment

• Operating System: Linux
• Node Version: v20.12.0
• Nuxt Version: 4.1.2
• CLI Version: 3.28.0
• Nitro Version: 2.12.6
• Package Manager: pnpm@8.15.6
• Builder: -
• User Config: modules, devtools, compatibilityDate, future, css
• Runtime Modules: @nuxt/ui@3.3.5
• Build Modules: -

Is this bug related to Nuxt or Vue?

Nuxt

Package

v3.x

Version

3.3.5

Reproduction

https://codesandbox.io/p/devbox/popover-hover-bug-v5sd4n

Description

With the UPopover component, with "hover" mode, if the content is too large (width) : when you hover the popover title and move the cursor outside either on the left or the right, the hover effect will not stop until some spaces away is met.

Adding a top margin doens't prevent the bug. Changing the width from "w-350" to "w-20" prevent the bug from happening.

Additional context

Logs

[benjamincanac]

Sorry but I don't really understand the issue here, the popover does close correctly in your reproduction 🤔

If you're trying to build a navigation menu you should use this component: https://ui.nuxt.com/docs/components/navigation-menu

[Yves852]

My apologies the last time I modified the repro to see the behavior with a smaller with and forgot those are permanent. Changed it back.

I know the navigation menu. I use the popover to create rich personalized megamenus.

[HugoRCD]

My apologies the last time I modified the repro to see the behavior with a smaller with and forgot those are permanent. Changed it back.

I know the navigation menu. I use the popover to create rich personalized megamenus.

What's stopping you from making a megamenu with the NavigationMenu? That's what it's there for 🤔

[Yves852]

My apologies the last time I modified the repro to see the behavior with a smaller with and forgot those are permanent. Changed it back.
I know the navigation menu. I use the popover to create rich personalized megamenus.

What's stopping you from making a megamenu with the NavigationMenu? That's what it's there for 🤔

Because the style of NavigationMenu is opinionated, playing with :items="foo" and :ui="{}" isn't convenient for me.

See example I realized following a Figma design for the website of the company I work for. Not yet officially released but I believe I can show this. I had to do similar megamenus for some of our customers and I expect other demands to come.

Note that I don't pretend it's the "right way", I found out it was more convenient to me. You are welcome explaining me how I can achieve similar or more complexe megamenus from NavigationMenu.

[HugoRCD]

You can do a lot with slots!

[Yves852]

I use slots often too. 😄

[benjamincanac]

The behavior is weird indeed but it seems it's an upstream bug of the HoverCard component in Reka UI, same behavior: https://reka-ui.com/docs/components/hover-card#root