React Tooltip does not handle scrolling when inside a fixed position element

[ethanwinters]

What package(s) are you using?

• carbon-components
• carbon-components-react

Detailed description

Describe in detail the issue you're having.

We are trying to use Carbon inside a fixed position widget. Many of the components (datepicker, overflowmenu, etc) run positioning calculations off of the body. This creates issues when they are created inside of a fixed position element as they don't "stick" to the fixed position elements during scroll behaviors. This issue is specifically in regards to tooltip only.

Is this issue related to a specific component?

This issue is specifically for the tooltip component

What did you expect to happen? What happened instead? What would you like to
see changed?

If I scroll a page with a tooltip inside a fixed element, the tooltip should stay in the correct place and not scroll with the page.

The DatePicker component takes an optional appendTo prop to decide where the popup code should be written to. In #8748 I propose also exposing the positionElement prop in the underlying flatpickr component. Tooltip mirroring that API by adding optional appendTo and positionElement props makes a lot of sense to me.

What version of the Carbon Design System are you using?

Latest

What offering/product do you work on? Any pressing ship or release dates we
should be aware of?

Watson Assistant (web chat). We need this by end of June to finish our migration to Carbon from our own "fake Carbon" because Carbon couldn't reach our needs in the past. This work will allow us to bring in a tooltip inside Watson Assistant web chat (which is end user facing with millions of user impressions).

Steps to reproduce the issue

Open a tooltip and scroll. The input field inside the div with position fixed will stay, the tooltip will scroll with the page.

Please create a reduced test case in CodeSandbox

• Style and vanilla JS:
  https://codesandbox.io/s/github/carbon-design-system/carbon/tree/main/packages/components/examples/codesandbox
• React:
  https://codesandbox.io/s/github/carbon-design-system/carbon/tree/main/packages/react/examples/codesandbox

https://codesandbox.io/s/lucid-fire-gvyxd?file=/src/index.js

Additional information

• Screenshots or code
• Notes

[emyarod]

adding data-floating-menu-container to an ancestor element instead of body should resolve the issue https://codesandbox.io/s/interesting-hooks-00s9r