如何创建一个带有工具提示的对话框，当使用 shadcn ui / Radix ui 关闭对话框时工具提示不会重新打开

Question

我目前正在使用下面的代码作为工具提示对话框组合

<Dialog
      open={isModalOpen}
      onOpenChange={async (open) => {
        setIsModalOpen(open);
        closeTooltip();
      }}
    >
      <TooltipProvider>
        <Tooltip>
          <DialogTrigger asChild>
            <TooltipTrigger asChild>
              <Button
                variant="ghost"
                id="browse-prompt"
                ref={triggerRef}
                className="grid aspect-square h-9 w-9 place-items-center rounded-full p-0 hover:bg-accent"
              >
                <Chrome className="h-5 w-5 text-white" />
                <span className="sr-only">Browse Prompts</span>
              </Button>
            </TooltipTrigger>
          </DialogTrigger>
          <TooltipContent>
            <h3 className="text-base font-semibold">Browse Prompt</h3>
            <p>Find useful prompts from others</p>
            <Arrow color="white" fill="white"></Arrow>
          </TooltipContent>
           // Dialog Content
        
             </Tooltip>
      </TooltipProvider>
    </Dialog>

但是当我关闭对话框时，工具提示会重新打开，我不希望出现这种行为。 我尝试对工具提示使用自己的单独状态，并在对话框打开时将工具提示设置为关闭，但是，

 onOpenChange={async (open) => {
        setIsModalOpen(open);
        if(!open) setIsTooltipOpen(false)
      }}

它不起作用，因为在这种情况下我也将工具提示的

onOpenChange

设置为

setIsTooltipOpen

。看起来工具提示是在对话框关闭一段时间后打开的

我也厌倦了在按钮中发送

mouseout

事件，但这也不起作用。 我尝试在关闭对话框后单击文档，但即使这样也不起作用 我该如何解决它？

我希望关闭对话框时工具提示不会重新打开。我应该离开，除非我再次重新悬停在扳机上。

Answer 1

要实现此目的，您不应使用嵌套触发器。仅保持对话框的打开状态就足够了。按如下方式重新组织代码以使其正常工作。

<TooltipProvider>
  <Tooltip>
    <TooltipTrigger asChild>
      <Button
        variant="ghost"
        id="browse-prompt"
        onClick={() => setIsModalOpen(true)}
        className="grid aspect-square h-9 w-9 place-items-center rounded-full p-0 hover:bg-accent"
      >
        <Chrome className="h-5 w-5 text-white" />
        <span className="sr-only">Browse Prompts</span>
      </Button>
    </TooltipTrigger>
    <TooltipContent>
      <h3 className="text-base font-semibold">Browse Prompt</h3>
      <p>Find useful prompts from others</p>
      <Arrow color="white" fill="white"></Arrow>
    </TooltipContent>
  </Tooltip>

  <Dialog open={isModalOpen} onOpenChange={setIsModalOpen}>
    // Dialog Content
    // call your action handler here by adding simple onClick={handleButtonClick} directly to dialog buttons
  </Dialog>
</TooltipProvider>