How to control the Popover component by hovering?

[birchrust]

I want to trigger the rendering of the Popover component by hovering, I tried it, but I don't know how to pass the state

[snowystinger]

You should be able to control it via the controlled state isOpen. https://react-spectrum.adobe.com/react-aria/Dialog.html#props
Be mindful that hover alone isn't an accessible interaction. Make sure there is a way for keyboard, touch, and screen readers to also access any important content or actions.

[birchrust]

thank

[daninus14]

Hi, I am having a problem with this approach in that I don't seem to find how to deactivate the popover (AKA close it) when a user interacts outside the div. For example, if a user clicks outside the popover, I want the popover to close. If I don't use this approach, by default the popover opens on clicking the button in the trigger and clicking outside or on the button again closes it, but now since it's controlled it doesn't. How can we solve this?

Here's a part of my code for reference

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

<Popover
          isOpen={hover}

Another question:

Make sure there is a way for keyboard, touch, and screen readers to also access any important content or actions.

is that properly taken care of by the onPress in the sample code above?

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?

[daninus14]

Actually just tried on a touchscreen and it doesn't work. Any ideas?

[daninus14]

I turned the questions into a new discussion because they are really expanding on the original question. Here it is: #6563