Skip to content

Hover Card Content cannot be moved down using alignOffset #3258

Open
@Lexachoc

Description

@Lexachoc

Bug report

Current Behavior

I cannot use alignOffset to shift the content down (when align="end"), it seems that it is limit to the boundary of the trigger.

image

No matter what value I set for alignOffset, the content will stay at the same position.

To reproduce, try to change the alignOffset from 0 to -100, and to -1000, it won't go down anymore when it reaches the bottom edge of trigger.

No idea how to solve this, and would be very grateful for any help!

I want to dynamically display the hover card content in different vertical positions, but it remains in the same position as in the example when I tried to set the alignOffset even smaller (negative value to let it goes down).

Expected behavior

I expect I can use alignOffset to shift the content down as I set it.

Reproducible example

https://codesandbox.io/p/sandbox/radix-hovercardcontent-alignoffset-issue-342tpf?file=%2Fsrc%2FApp.jsx

Your environment

Software Name(s) Version
Radix Package(s) @radix-ui/react-hover-card ^1.1.2
React n/a 18.3.1
Browser Chrome Version 131.0.6778.86 (Official Build) (64-bit)
Assistive tech
Node n/a
npm/yarn
Operating System Win 10 Pro 22H2

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions