How can I make elements such as select menus, tooltip, etc. render in a specific DOM element? #11454
Description
The DOM elements for Tooltips, Selects, etc render in the body tag in the DOM. I need them scoped into another DOM element. How can I achieve this?
I was able to achieve this with Modals by specifying the container attribute and pointing to a ref, but this does not work for other elements. Additionally, wrapping things in a Portal does not do anything.
No dice:
<Portal container={appContainer}>
<Tooltip enterDelay={300} title='Zoom'>
<Select
className='zoom'
onChange={changeZoomLevel}
value={viewPort.zoom}
>
<MenuItem value={50}>50%</MenuItem>
<MenuItem value={75}>75%</MenuItem>
<MenuItem value={90}>90%</MenuItem>
<MenuItem value={100}>100%</MenuItem>
<MenuItem value={125}>125%</MenuItem>
<MenuItem value={150}>150%</MenuItem>
<MenuItem value={200}>200%</MenuItem>
</Select>
</Tooltip>
</Portal>