[Tooltip/Overflow menu] Problems with absolute positioned components in scrollable elements

[jakubfaliszewski]

What package(s) are you using?

• carbon-components
• carbon-components-react

Detailed description

Related issue: #911

Describe in detail the issue you're having.

In this issue I will refer to tooltip and overflow menu, but problem may be related to any components that are created by default with position: absolute and/or rendered at the end of DOM.

I had a problem with tooltips that are placed inside scrollable elements (see CodeSandbox link below). I've managed to render tooltips inside specified element using data-floating-menu-container attribute, but it does not resolve issue entirely.

Problem here is that tooltip generates with positioning suitable for traditional usage - it's broken when parent has styles `position: relative';

Is this issue related to a specific component?

Tooltip/Overflow menu

What browser are you working in?

Chromium

Steps to reproduce the issue

1. Place tooltip inside scrollable content that has some offset to top of the view.
2. Set data-floating-menu-container' attribute to it's parent. Also apply position: relative` style to it.

Please see CodeSandbox below.

Additional information

Sandbox with current behavior:

https://codesandbox.io/s/dreamy-hopper-7rylg

Please remove commented part in App.scss to see correct behavior.

What needs to be done?

Use different calculations for tooltips/menus that are placed inside [data-floating-menu-container]