Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Change placement of hover cards #797

Open
matthew-white opened this issue Nov 24, 2024 · 0 comments
Open

Change placement of hover cards #797

matthew-white opened this issue Nov 24, 2024 · 0 comments
Labels
frontend Requires a change to the UI

Comments

@matthew-white
Copy link
Member

matthew-white commented Nov 24, 2024

Right now, we use the Bootstrap popover plugin to position hover cards to the right of the trigger text. The middle of the trigger text is aligned with the middle of the hover card. However, we want to position the hover card differently. From the release criteria for v2024.3:

  • I should normally see the infocard appear to the right of the link or menu entry, with the top of the card aligned to the top of the trigger text
    • If there isn’t room on the right, I should see it on the left.
    • If there isn’t room onscreen (without needing to scroll) to fit the height of the card, I should see the bottom of the card 3-4px above the bottom of the browser viewport

I think we should probably wait to do this until we've replaced the Bootstrap plugin with Floating UI: see getodk/central-frontend#984. Alternatively, maybe we don't need to use the Popover component in the HoverCards component. Maybe we could use Floating UI directly in HoverCards instead.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
frontend Requires a change to the UI
Projects
None yet
Development

No branches or pull requests

1 participant