Create a ContextualHelp component that opens when hovering it

[ndozhh]

Hello everyone!

I'm trying to create a ContextualHelp component that opens when pressing it but also when the user hovers ir. I'm using the RAC Button as the trigger and the Popover component. The problem is that when I set a state inside the onHoverStart prop, the onHoverEnd is also called immediately (I think because of the re-render), so the component enters in a re-render loop and something curious is that if I move the cursor only one pixel, the handlers are called again.

I think it's related with the Popover, because if I use the state variable to render a simple element it works great. Any idea if it's even possible to fix this?

You can play with it here https://codesandbox.io/p/devbox/kttytn

NOTE: my implementation is based on this #4705 and this #7192

Thank you!!

[ndozhh]

Hello @snowystinger

Would you mind taking a look to this and share your thoughts or an advice?

Thank you!

[snowystinger]

I haven't thought about this in a while. But it seems to me that there's a fundamental flaw in opening modals (aria terminology, not the commonly used synonym for dialog) on hover, which is that they would be stuck open until a user clicks off of them. This is because everything behind a modal is inaccessible/inert. This is either accomplished by actually using inert or through an invisible underlay.

Note that the invisible underlay is the reason the button un-hovers and the modal closes.

Both ways of rendering the background would present a problem with hover off. You'd have to do your own hit box detection or something.

In general, we discourage people from using hover interactions at all.

You could write your own useHover specifically for this case which handles things like the custom hit box detection or not calling hover end when an underlay appears. This is a very rough overview, I do not know what edge cases will be found beyond what I've mentioned so far.