Tooltip and DialogTrigger

[martpet]

Hello,
what would be the correct way to add a tooltip to an icon that opens a dialog?

I'm trying with this code:

<TooltipTrigger>
  <DialogTrigger type="popover" isOpen={open} onOpenChange={setOpen}>
    <ActionButton isQuiet aria-label={formatMessage({ id: 'button.settings' })}>
      <SettingsIcon />
    </ActionButton>
    <Dialog size="L">
      <Content>
        <Settings />
      </Content>
    </Dialog>
  </DialogTrigger>
  <Tooltip>My tooltip text</Tooltip>
</TooltipTrigger>

Hovering over the icon when the dialog is closed is OK:

However when the dialog is open and hovering over the icon, the tooltip appears over a Picker inside the dialog:

[snowystinger]

Ah, Tooltip context would be going to the Picker probably if you wrap the whole Dialog in a tooltip trigger.

Better instead to only wrap the ActionButton with the TooltipTrigger and then put the DialogTrigger around all of that.

[martpet]

Hey, snowystinger, thank you for your answer. I tried it but the dialog won't open if I do it like this:

<DialogTrigger type="popover" isOpen={open} onOpenChange={setOpen}>
  <TooltipTrigger>
    <ActionButton>
      <SettingsIcon />
    </ActionButton>
    <Tooltip>My tooltip</Tooltip>
  </TooltipTrigger>
  <Dialog>
    <Content>
    </Content>
  </Dialog>
</DialogTrigger>

[snowystinger]

Ah yep, I see that here https://codesandbox.io/s/youthful-lamarr-up3ur?file=/src/App.js
Possibly a bug, could you open an issue? We are on shutdown right now, so won't get to really look at it until the new year. You're welcome to make a PR as well to address it. I'd probably compare ActionMenu and DialogTriggers. Though our Menu's may have the same issue, but since they don't have a Picker inside them, we don't see this issue.