How to nest radix Tooltip & Dropdown components

Question

I'm using RadixUI library and I encountered a problem with building a button with a dropdown where the dropdown itself contains buttons with tooltip. Here is my code:

  const MyButton = forwardRef((props: any, forwardedRef: any) => (
    <button {...props} ref={forwardedRef} />
  ));

  let btn = (
    <Popover.Root>
      <Tooltip.Provider>
        <Tooltip.Root>
          <Tooltip.Trigger asChild>
            <Popover.Trigger asChild>
              <MyButton>Button with tooltip</MyButton>
            </Popover.Trigger>
          </Tooltip.Trigger>
          <Tooltip.Content>Content</Tooltip.Content>
        </Tooltip.Root>
      </Tooltip.Provider>
      <Popover.Portal>
        <Popover.Content>
          <Tooltip.Provider>
            <Tooltip.Root>
              <Tooltip.Trigger asChild>
                <MyButton>Nested button with tooltip 1</MyButton>
              </Tooltip.Trigger>
              <Tooltip.Content>Tooltip nested1</Tooltip.Content>
            </Tooltip.Root>
          </Tooltip.Provider>

          <Tooltip.Provider>
            <Tooltip.Root>
              <Tooltip.Trigger asChild>
                <MyButton>Nested button with tooltip 2</MyButton>
              </Tooltip.Trigger>
              <Tooltip.Content>Tooltip nested2</Tooltip.Content>
            </Tooltip.Root>
          </Tooltip.Provider>
        </Popover.Content>
      </Popover.Portal>
    </Popover.Root>
  );

  return btn;

And the problem is that once I open the dropdown, the tooltip for the first button inside this dropdown is automatically triggered, while for the second one everything works fine i.e. its not triggered until I hover over it. How can I fix that?

Answer 1

I remeber that I had the same issue in a project. The problem is when opening the popover, Radix will automatically focus the first focusable element withen the <Popover.Content>.

A workaround would be to make a fake focusable item:

<Popover.Content>

  <span tabIndex={0} className="sr-only" />

  <Tooltip.Provider>
    <Tooltip.Root>
      <Tooltip.Trigger asChild>
        <MyButton>Nested button with tooltip 1</MyButton>
      </Tooltip.Trigger>
    <Tooltip.Content>Tooltip nested1</Tooltip.Content>
  </Tooltip.Root>
 </Tooltip.Provider>
</Popover.Content>

If you're using tailwindcss sr-only class name will hide the element. If not, use @radix-ui/react-visually-hidden

Side Note: You don't need to use <Tooltip.Provider> every time you render a tooltip. You can put the tooltip once in your top-level layout.