shadcn's HoverCard be covered

[cathaysia]

Hi, I'm trying using this with https://ui.shadcn.com/docs/components/hover-card, however, the HoverCard be covered by next virtual item. Has anyone know how solve this?

here is my code:

          <HoverCard>
            <HoverCardTrigger>
              <UserAvatar userName={names} className="w-4" />
            </HoverCardTrigger>
            <HoverCardContent className='z-50'>
              <div>hhhh</div>
            </HoverCardContent>
          </HoverCard>

Then this component are rendered as a list item in virtual.

[piecyk]

Thanks for reaching out! It’s hard to pinpoint the issue without a full context. If you can provide a small, working example or a minimal reproduction of the problem, I'd be happy to take a closer look.

[cathaysia]

simple.tar.gz

Here is a simple project to reproduce this problem.

And here is the command to start it:

$ npm install
$ npm dev

After open the browser, you need hover on title to show the hover-card.

[Wordllban]

I had pretty similar solution, but it was on-click popup. I assume this is caused by absolute items position
React portals helped me to solve this issue
https://react.dev/reference/react-dom/createPortal

[cathaysia]

I found this problem is caused by translateY, replace it with top can solve this problem: