Positioning tooltip content directly above trigger

[wencyen]

Hi,
I am looking for a way to position the tooltip content over the trigger element? Given the following example, I've tried a few configurations, but so far to no avail. Is it possible to do this in a clean way using ark's tooltip positioning api? I dug around the source code and found the getPlacement function from zag-js utilities. In particular, I see that it computes the transform values for --x and --y from a package called @floating-ui/dom. I believe that if I can understand how these two values are computed, then I may get the answer to my original question.

computePosition(reference, floating, {
      placement,
      middleware,
      strategy,
      ...config,
    }).then((data) => {
      const x = Math.round(data.x)
      const y = Math.round(data.y)

      floating.style.setProperty("--x", `${x}px`) // ⭐️
      floating.style.setProperty("--y", `${y}px`) // ⭐️
      // ...
    })

<Tooltip.Root positioning={positioningProp}>
  <Tooltip.Trigger>
    <UserAvatar />
  </Tooltip.Trigger>
  <Tolltip.Positioner>
    <Tooltip.Content>
      <div>
        <UserAvatar />
        <UserName />
        <UserEmail />
      </div>
    </Tooltip.Content>
  </Tolltip.Positioner>
</Tooltip.Root>

// Expected the offset values of 0 to position the tooltip content at the top left corner of the trigger
const positioningProp = {
  offset: { mainAxis: 0, crossAxis: 0 },
  overlap: true,
}

// This pushes the tooltip content up against the left edge of the page but does not adjust the vertical position at all
const positioningProp = {
  offset: { mainAxis: -60, crossAxis: -60 },
  placement: "left-start",
}

[cschroeter]

@codepath2019

I'm happy to help. Could you please provide an example repository (Stackblitz etc)?

[wencyen]

Hey @cschroeter, thank you for responding. I will spin one up as soon as I have a moment. I will likely be able to do so after work today, or tomorrow.

[wencyen]

Hi, cschroeter,

Works been busy this week. I'll try to get you the repository as soon as I can. thanks!