Using Popover and Tooltip together

[alexandre-lim]

Hello 👋

I'm trying to use a Popover and a Tooltip in PopoverContent. When triggering the Popover, the Tooltip is focused, but the content is closed. I expected the Tooltip content to be open as it is focused 🤔

When navigating with tabs, the behavior is what I would expect when the tooltip content is focused:

Any ideas of what's happening? I made a codesandbox and logged in console the value in onOpenChange of the Tooltip component. It goes from true to false. That explain that the content is closed but I don't understand why it's going from true to false.

Thanks!

[benoitgrelard]

Hi @Wraithraiser,

Thanks for raising this up.
It looks like it's potentially a duplicate of #937 whereby in this case, the popover is initially not positioned (whilst kept invisible) and then moved into position. This causes the internal detection of the tooltip trigger moving to fire.

So it looks like we're going to have to change how we do this at some point.

Interestingly though here, you're asking for something that most people are actually asking for the opposite.
ie. when the focus is not made by you (the user) people generally seem annoyed that the tooltip shows up.
How do you feel about it? Were you asking mostly because you expected it to show? Or because you genuinely want it to? (regardless of the fact it's a bug for now 😀)

[alexandre-lim]

Hi @benoitgrelard,

Thanks for the fast answer 😄 I was asking because I expected it to show since the tooltip is focused. But I can understand that some people may want more control and have the opposite.

On my use case, the fact that the open value of Tooltip goes from true to false shows the Tooltip content when I click to open the Popover and then disappear. It's fast but can be disturbing for the user experience. I can fix it by overriding onOpenAutoFocus in Popover but then I break the tabs navigation which is not good for accessibility 😬 I'll try to search for a solution but it will probably not be optimal. 😅
Is there any way I can help on this bug? Maybe I can create an issue?

[benoitgrelard]

I don't think we need a new issue as I'm fairly certain that's what's happening (#937), we will double check that though.

[benoitgrelard]

Yes I've just double checked it and that's the issue.
For the moment, perhaps you can focus something else in onOpenAutoFocus like you say. Perhaps, just focusing the Popover.Content itself for now is good enough for you?

[alexandre-lim]

Yes it's enough in my use case, thanks for your help @benoitgrelard!
For people who may read this discussion, here's what I did:

<Popover.Content
  onOpenAutoFocus={(event) => {
    event.preventDefault();
    event.target.focus();
  }}
>
  ...
</Popover.Content>