How to nest radix Tooltip & Dropdown components

[piszczu4]

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?

[Anyel-ec]

A possible cause of the error that occurs when using the RadixUI library is that the tooltip of the button found in the drop-down menu is automatically displayed when opening the menu. To avoid this unwanted behavior, you can implement logic that prevents the tooltip from being activated when the menu is open. You can achieve this using states or references.

[piszczu4]

Hi, basically it happens only for the first button in the dropdown, others works fine. Could you give an example of how I could implement the fix proposed by you?

[Anyel-ec]

Yes of course.

import { useState } from 'react';

const [tooltipVisible, setTooltipVisible] = useState(false);

let btn = (
<Popover.Root>
<Tooltip.Provider>
<Tooltip.Root>
<Tooltip.Trigger asChild>
<Popover.Trigger asChild>
<MyButton
onMouseEnter={() => setTooltipVisible(false)}
onMouseLeave={() => setTooltipVisible(true)}
>
Button with tooltip

</Popover.Trigger>
</Tooltip.Trigger>
{tooltipVisible && <Tooltip.Content>Content</Tooltip.Content>}
</Tooltip.Root>
</Tooltip.Provider>
<Popover.Portal>
<Popover.Content>
<Tooltip.Provider>
<Tooltip.Root>
<Tooltip.Trigger asChild>
Nested button with tooltip
</Tooltip.Trigger>
<Tooltip.Content>Tooltip nested</Tooltip.Content>
</Tooltip.Root>
</Tooltip.Provider>
</Popover.Content>
</Popover.Portal>
</Popover.Root>
);

[piszczu4]

I made some changes to support button with tooltip in the nested component too:

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

  const [tooltipVisible, setTooltipVisible] = useState(false);
  const [tooltipVisibleNested, setTooltipVisibleNested] = useState(false);

  let btn = (
    <Popover.Root>
      <Tooltip.Provider>
        <Tooltip.Root>
          <Tooltip.Trigger asChild>
            <Popover.Trigger asChild>
              <MyButton
                onMouseEnter={() => setTooltipVisible(true)}
                onMouseLeave={() => setTooltipVisible(false)}
              >
                Button with tooltip
              </MyButton>
            </Popover.Trigger>
          </Tooltip.Trigger>
          {tooltipVisible && <Tooltip.Content>Content</Tooltip.Content>}
        </Tooltip.Root>
      </Tooltip.Provider>
      <Popover.Portal>
        <Popover.Content>
          <Tooltip.Provider>
            <Tooltip.Root>
              <Tooltip.Trigger asChild>
                <MyButton
                  onMouseEnter={() => setTooltipVisibleNested(true)}
                  onMouseLeave={() => setTooltipVisibleNested(false)}
                >
                  Button with tooltip
                </MyButton>
              </Tooltip.Trigger>
              {tooltipVisibleNested && (
                <Tooltip.Content>Nested Content</Tooltip.Content>
              )}
            </Tooltip.Root>
          </Tooltip.Provider>
        </Popover.Content>
      </Popover.Portal>
    </Popover.Root>
  );

  return btn;

Is that what you meant? And do you know whether why this issue occurs?

[benoitgrelard]

Yes that's because when you navigate menu items, they will be focused for accessibility reasons, then the tooltip shows on focus too. Arguably this is very uncommon to see tooltips on dropdown menu items. I have never seen this in a native UI.