Popover with Tooltip

import { Popover } from '@ark-ui/react/popover'
import { Tooltip } from '@ark-ui/react/tooltip'
import { XIcon } from 'lucide-react'

export const Example = () => {
  return (
    <Popover.Root>
      <Tooltip.Root openDelay={0}>
        <Tooltip.Trigger asChild>
          <Popover.Trigger>Click Me</Popover.Trigger>
        </Tooltip.Trigger>
        <Tooltip.Positioner>
          <Tooltip.Content>Tooltip</Tooltip.Content>
        </Tooltip.Positioner>
      </Tooltip.Root>
      <Popover.Positioner>
        <Popover.Content>
          <Popover.Title>Title</Popover.Title>
          <Popover.Description>Description</Popover.Description>
          <input type="text" placeholder="Type something..." />
          <Popover.CloseTrigger>
            <XIcon />
          </Popover.CloseTrigger>
        </Popover.Content>
      </Popover.Positioner>
    </Popover.Root>
  )
}