How to keep RadixUI Tooltip/Modal in dom

Question

I'm using RadixUI library (https://www.radix-ui.com/primitives/docs/components/tooltip) for my components. The problem is that I'd like to keep the content of my Tooltip in dom. Currently, it appears only on hover and is rendered in body element as a last child. What I'd like to obtain is that:

1. Tooltip content is always kept in dom (for example with display: none style)
2. Tooltip content is rendered inside my tooltip trigger or at least in a way that its possible to identify with which trigger its associated

EDIT Currently I have the following

    <TooltipProvider delayDuration={0}>
      <Tooltip open={open} onOpenChange={setOpen}>
        <TooltipTrigger asChild>
          <span>{label}</span>
        </TooltipTrigger>
        <TooltipContent forceMount    className={cn(
      'z-50 rounded-sm border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
      open ? "" : "hidden
    )}}>
          {content}
        </TooltipContent>
      </Tooltip>
    </TooltipProvider>

The remaining drawback - closing animation does not work with hidden class. Is it possible to make it works?

Answer 1

1. You can achieve that by passing an open prop to the Tooltip.Root:

// instead of 'true' you can use any boolean variable
<Tooltip.Root open={true}>
  ...other stuff
</Tooltip.Root>

This way you will always have your tooltip in the DOM. Hence, you should be able to add any CSS you want.

2. You can simply remove the Tooltip.Portal and your tooltip will be rendered in the same place as where you've added it in your JSX