[BUG] - Can't trigger popover with tooltop button

[richardn227]

Describe the bug

I want to open a popover through a button with helper text (tooltip). But when I click on the trigger button, it doesn't open the popover. It works fine when I remove the Tooltip component, but it won't work as I expect.

Your Example Website or App

https://codesandbox.io/p/sandbox/autumn-cloud-knwv73?file=%2FApp.jsx%3A6%2C47&utm_medium=sandpack

Steps to Reproduce the Bug or Issue

Just run the code example in ref link

Expected behavior

Open the popover content when click on a tooltip button

Screenshots or Videos

No response

Operating System Version

Windows 11

Browser

Chrome

[jrgarciadev]

Hey @nguyen227

Tooltip and Popover cannot share the same DOM element as trigger element.

A workaround is to add an extra element inside the Tooltip. Keep in mind that the focus state will be handled differently.

    <Popover placement="top" showArrow={true}>
      <Tooltip content="Help text">
        {/* extra element */}
        <div className="max-w-fit">
          <PopoverTrigger>
            <Button>Open Popover</Button>
          </PopoverTrigger>
        </div>
      </Tooltip>
      <PopoverContent>
        <div className="px-1 py-2">
          <div className="text-small font-bold">Popover Content</div>
          <div className="text-tiny">This is the popover content</div>
        </div>
      </PopoverContent>
    </Popover>

See this Codesanbox