`asChild` for `TooltipTrigger` and `TooltipAnchor`

[teidesu]

it would be cool if TooltipTrigger and TooltipAnchor had an asChild prop (similar to radix) that would attach the listeners to already existing dom nodes instead of creating a new wrapper div.

currently i have to patch @corvu/tooltip to expose useInternalTooltipContext (since the set{Anchor,Trigger}Ref are only available there. tbh would be nice if they were public too) and do something like this

function TooltipTrigger(props: { children: JSX.Element }) {
  const child = resolveFirst(() => props.children)

  const context = TooltipPrimitive.useInternalContext()

  createEffect(on(child, (child) => {
    context.setTriggerRef(child)
  }))

  return child as unknown as JSX.Element
}

[GiyoMoon]

Wouldn't this be solvable with the as prop? https://corvu.dev/docs/dynamic-components/#solid-components

[teidesu]

it kinda is, but also not really since i would still need to use the library's component whenever i need a tooltip trigger. this is primarily for better dx

i have this app-level wrapper for tooltip (simplified)

export function Tooltip(props: {
  class?: string
  options?: TooltipOptions
  content: JSX.Element
  children?: JSX.Element
}) {
  return (
    <TooltipPrimitive.Root
      {...props.options}
    >
      {props.children && (
        <TooltipTrigger>
          {props.children}
        </TooltipTrigger>
      )}
      <TooltipPrimitive.Portal>
        <TooltipPrimitive.Content class={...}>
          {props.content}
        </TooltipPrimitive.Content>
      </TooltipPrimitive.Portal>
    </TooltipPrimitive.Root>
  )
}

which doesn't care at all what element it's being used on, it just works on anything

<Tooltip content="meow">
  <Button icon="cat" />
</Tooltip>

<Tooltip content="bark">
  <a href="/woof">bark</a>
</Tooltip>

and as a side effect i can pass anything (even a ref) as a child allowing me to customize the element it's being anchored/triggered against to basically anything in the dom

without asChild i need to manually wrap the trigger in a <TooltipTrigger as={...}> which is cumbersome and doesn't allow for fully custom refs :c

[GiyoMoon]

The problem with asChild is that it's pretty much impossible to implement 1:1 in Solid because we don't have a virtual DOM to work with. Children are real elements and we can't modify them like radix can :/

[teidesu]

yeah, ik it won't be technically one-to-one, but the idea is the same – attaching listeners to and using for positioning user-provided dom elements instead of the library managing them

tbh just providing a way to manually pass anchor/trigger refs (i.e. exposing those in context/props) would also solve this