Radix Tooltip positioned incorrectly

[Miloshinjo]

Hello, I need a bit of help

I am trying to get radix tooltip to work. First off, I have to wrap a trigger element in a in order to show correctly on some elements.

Mostly I have trouble with my absolute positioned elements that already have some transforms applied to them. Is there a way for this lib to work with absolute positioned elements? If so, how?

If not, I'd appreciate that answer as well :)

The elements are in a wrong position. It works fine on regularly placed elements tho.

[benoitgrelard]

Hey @Miloshinjo, please provide an example sandbox, then we can take a look.

[Miloshinjo]

I'll give it a shot. thanks.

[Miloshinjo]

@benoitgrelard Here it is https://codesandbox.io/s/tender-microservice-53wlqd?file=/src/Tooltip.tsx .

Notice that if you remove <span> around children of the tooltip component, tooltip doesn't even show. But if we have span, it shows around the parent element, not around the child (the circle) where it needs to be :)

I hope i did not make any grave mistakes, but this is where I am stuck atm:)

[benoitgrelard]

Notice that if you remove around children of the tooltip component, tooltip doesn't even show. But if we have span, it shows around the parent element, not around the child (the circle) where it needs to be :)

That's because your InfoCircle isn't forwarding props/ref. If you're passing it as the child of the trigger (which you've use asChild on) you want to make sure that component accepts props/ref and is an interactive element (like a button or a).

Here, I've just removed the span around children and fixed the implementation of InfoCircle:
https://codesandbox.io/s/confident-bose-qr6psm?file=/src/App.tsx

[Miloshinjo]

Wow, so it was ref thing :) Thanks a lot, I would have never guessed that, saved me a bunch of time :) cheers, I owe you a beer :)