You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I'm trying to achieve a behavior using the Hovercard that seems trivial, yet is not built-in, and also a bit tricky to do in user-land - when opening a Hovercard using the <HovercardDisclosure>, I expect the card to be placed based on it. Similar to how the anchor of a Popover behaves (as well as other components in Ariakit).
(useHovercardContext is a Context consumer for a context I manage that basically has a getter and setter function for a getAnchorRect function).
But this proved to be finicky at best.
Any help on achieving this would be appreciated. Also, is this something that should maybe be made the default behavior in Ariakit? i.e. having the Hovercard's placement be based on the <HovercardDisclosure>, not the <HovercardAnchor>, when opened through it.
P.S.
My actual real world use-case is a even more extreme at times, since the Hovercard's anchor is on basically an entire table cell, which can have multiple rows of text, and is also opened based on the cursor's position (this is achieved using getAnchorRect):
A contrived example from our internal StorybookCleanShot.2024-05-08.at.00.01.23.mp4
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
-
I'm trying to achieve a behavior using the Hovercard that seems trivial, yet is not built-in, and also a bit tricky to do in user-land - when opening a Hovercard using the
<HovercardDisclosure>
, I expect the card to be placed based on it. Similar to how the anchor of a Popover behaves (as well as other components in Ariakit).This is not the case - as shown in this example, based on the example from the docs, but exaggerated to have a wider anchor:
CleanShot.2024-05-07.at.23.59.42.mp4
How can I achieve this? My attempt was to set the
getAnchorRect
to the<HovercardDisclosure>
's ref when it received focus:(
useHovercardContext
is a Context consumer for a context I manage that basically has a getter and setter function for agetAnchorRect
function).But this proved to be finicky at best.
Any help on achieving this would be appreciated. Also, is this something that should maybe be made the default behavior in Ariakit? i.e. having the Hovercard's placement be based on the
<HovercardDisclosure>
, not the<HovercardAnchor>
, when opened through it.P.S.
My actual real world use-case is a even more extreme at times, since the Hovercard's anchor is on basically an entire table cell, which can have multiple rows of text, and is also opened based on the cursor's position (this is achieved using
getAnchorRect
):A contrived example from our internal Storybook
CleanShot.2024-05-08.at.00.01.23.mp4
Beta Was this translation helpful? Give feedback.
All reactions