RadixUI Popover与Tooltip嵌套时无法打开的问题排查

问题出在你封装的TooltipButton和PopoverButton各自独立渲染了触发器按钮，导致嵌套时事件被上层组件拦截，且状态无法协调。要保留独立组件的同时解决嵌套问题，可按以下步骤修改：

1. 重构组件，支持子元素作为触发器 #

利用Radix UI的asChild属性，让两个组件不再内部硬编码按钮，而是接受外部传入的子元素作为触发器，这样嵌套时事件能正确传递：

修改TooltipButton #

import * as Tooltip from '@radix-ui/react-tooltip';
import { Button } from './Button';
import React from 'react';

interface TooltipButtonProps {
  content: string;
  children: React.ReactNode;
  open?: boolean;
  onOpenChange?: (open: boolean) => void;
}

export const TooltipButton = ({ content, children, open: externalOpen, onOpenChange: externalOnOpenChange }: TooltipButtonProps) => {
  const [internalOpen, setInternalOpen] = React.useState(false);
  const open = externalOpen !== undefined ? externalOpen : internalOpen;
  const onOpenChange = externalOnOpenChange || setInternalOpen;

  return (
    <Tooltip.Root open={open} onOpenChange={onOpenChange}>
      <Tooltip.Trigger asChild>{children}</Tooltip.Trigger>
      <Tooltip.Portal>
        <Tooltip.Content className="bg-black text-white px-3 py-1 rounded-md">
          {content}
          <Tooltip.Arrow className="fill-black" />
        </Tooltip.Content>
      </Tooltip.Portal>
    </Tooltip.Root>
  );
};

修改PopoverButton #

import * as Popover from '@radix-ui/react-popover';
import { Button } from './Button';
import React from 'react';

interface PopoverButtonProps {
  content: string;
  children: React.ReactNode;
  open?: boolean;
  onOpenChange?: (open: boolean) => void;
}

export const PopoverButton = ({ content, children, open: externalOpen, onOpenChange: externalOnOpenChange }: PopoverButtonProps) => {
  const [internalOpen, setInternalOpen] = React.useState(false);
  const open = externalOpen !== undefined ? externalOpen : internalOpen;
  const onOpenChange = externalOnOpenChange || setInternalOpen;

  return (
    <Popover.Root open={open} onOpenChange={onOpenChange}>
      <Popover.Trigger asChild>{children}</Popover.Trigger>
      <Popover.Portal>
        <Popover.Content className="border border-gray-300 p-4 rounded-md bg-white">
          {content}
          <Popover.Close asChild>
            <Button className="mt-2">关闭</Button>
          </Popover.Close>
        </Popover.Content>
      </Popover.Portal>
    </Popover.Root>
  );
};

2. 协调嵌套时的状态 #

在父组件中关联两个组件的状态，避免Tooltip和Popover同时显示的交互冲突：

import { useState, useEffect } from 'react';
import { TooltipButton } from './TooltipButton';
import { PopoverButton } from './PopoverButton';
import { Button } from './Button';

export default function App() {
  const [popoverOpen, setPopoverOpen] = useState(false);
  const [tooltipOpen, setTooltipOpen] = useState(false);

  // 当Popover打开时自动关闭Tooltip
  useEffect(() => {
    if (popoverOpen) {
      setTooltipOpen(false);
    }
  }, [popoverOpen]);

  return (
    <div className="p-8">
      <TooltipButton 
        content="这是提示框内容"
        open={tooltipOpen}
        onOpenChange={setTooltipOpen}
      >
        <PopoverButton 
          content="这是弹出框内容"
          open={popoverOpen}
          onOpenChange={setPopoverOpen}
        >
          <Button>点击我</Button>
        </PopoverButton>
      </TooltipButton>
    </div>
  );
}

关键说明 #

• 使用asChild让组件复用外部传入的按钮作为触发器，保证嵌套时事件能正确冒泡到下层组件。
• 开放open和onOpenChange props，让外部可以控制组件状态，解决浮层同时显示的冲突。
• 保留了两个组件的独立性，你可以单独使用任意一个，也可以按需求嵌套。

内容的提问来源于stack exchange，提问作者Ugus