Tooltip position incorrect when portalled = false inside positioned parent container

Bug report

Current Behavior

With the default portalled behavior the tooltip appears in the correct position:

With portalled set to false the tooltip wrapping div does appear in the correct place in the DOM, but it has a large translate3d value set to it meaning it is not visible. This translate3d value is the same as the portalled version meaning its calculating from the corner of the screen.

If I remove the translate3d from the wrapper, the tooltip is visible, but still in the wrong position:

Expected behavior

Visual position of tooltip should be the same for both portalled and not portalled. The tooltip being positioned needs to know if positioning is relative to screen or a parent container with a position set.

Reproducible example

CodeSandbox Example

Suggested solution

Update positioning logic to take into account parent containers which change 0, 0 position.

Your environment

Software	Name(s)	Version
Radix Package(s)	Tooltip	0.01
React	n/a	16.12
Browser	Chrome, FF, Safari, Edge	Latest
Assistive tech	n/a
Node	n/a	10.17
npm/yarn	Yarn	1.22.10
Operating System	Mac + Windows	Latest

[mattaningram]

I can only use the portalled version if we can control the z-index of the content in the radix-portal, otherwise the tooltips appear behind my modals and overlays which are also portalled but have a z-index that we can’t remove yet: https://github.com/radix-ui/primitives/issues/368

I would perhaps note this in documentation until it is fixed because having a tooltip in a scrollable/positioned parent is very common, so if you allow for turning portalling off a lot of people will encounter this bug.

[benoitgrelard]

The pointer-events thing can be controlled via a prop: disableOutsidePointerEvents. You can turn that off if you don’t want/need it. It is there to block interactions when clicking outside do dismiss the menu.