Control popover by hovering and outside interactions

[daninus14]

This discussion talks about controlling a popover by hovering using the isOpen controlled state. @snowystinger Thanks for the answer there.

However, doing that makes it so that we loose:

1. Accessibility features for touch screens
2. Clicking outside of the popover does not close it

Here is the sample code for reference

<div
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      className="flex justify-center"
    >
      <DialogTrigger>
        <Button
          onPress={() => setHover(!hover)}

<Popover
          isOpen={hover}

Note that the onPress above did not help for touch screens, probably because pressing and hovering overlap. With iPad mini's having large resolutions, it's hard to tell if we are on a computer or touch only environment and resolution based rendering will not help us here.

I know that the component by default has a lot of the accessibility taken care of, so I am a bit concerned of using this as a controlled component since I probably loose all of that, just to make it open with hover. Could we use the TooltipTrigger in combination with the DialogTrigger to get the benefits of both hover and the built in accessibility functionality?

Summary of Questions

1. How can we close the popover by pressing on the button again when the popover is open? This is while keeping the hover functionality.
2. Is there a built in way to get the hover functionality and keep all the accessibility features?
3. How to make it so that clicking outside of the popover will close it?

[snowystinger]

There's no such thing as hover on a touch screen. This is why tooltips are not accessible. Checking screen resolution is not a reliable way to check if the environment is touch only, as you've noted, and there isn't any way to determine this as of the time of writing this. People can connect a keyboard to an iPad for instance, or they may be using VoiceOver.

I'm guessing the onPress isn't firing on the button in the dialog trigger because there is an underlay. You may have to do more work to hook up events to support this. Overall it's not recommended because hover isn't an accessible pattern.

[snowystinger]

Yes, I'm advising against using hover. "It's not recommended" was referring to using hover to control the showing/hiding of an element.

An underlay is an element which sits under an overlay and blocks interactions with the things "behind" the overlay. https://react-spectrum.adobe.com/react-aria/Modal.html#features

Closing the popover when you click outside can be enabled with shouldCloseOnInteractOutside see the prop table in https://react-spectrum.adobe.com/react-aria/Popover.html
This should "hook up" the events I was mentioning for you. Otherwise you'll need to listen for press/click/touch/whatever makes sense in order to close when you interact outside.

We do not have a built in way to hover open popovers at this point in time. We may eventually allow for that, but it's not high in our priorities.

[daninus14]

Great, thanks!

[mryechkin]

Hi @daninus14 - did you end up figuring this out? I'm currently trying to build a "Toggletip" using React Aria that has the same usage requirements as what you described in the original post, and am running into the same problems. Would love to know how you solved this. Thanks

[daninus14]

Hi, I basically accepted their recommendation to not use hovering 🤣. Actually, I noticed gmail and a bunch of other apps don't support mouse over anymore.

[daninus14]

Maybe you can have a timer which automatically hides after a few seconds if it's still not hidden