I have a bug on site, where I have a tooltip, which is mispositioned in modal windows because of the scroll value caused by overflow-y
Basically, I need to send the current amount of scroll there is in
overflow-ymodal component, because of the modal positioning in overflow, the flow of the<ReactTooltip />gets offset.
- lifting the
<ReactToolTip />outside of the<Modal />does the trick - which as I tested in a single
<App />works, but this means, you have to have the<Modal />in the same componenet as<ReactTooltip />. - Issue is, in my project, the structure is much more complicated and the components has a nested hierarchy of sometimes 4-5 components deep inside the modal.
So as soon as you are importing a component, you can't have the <ReactTooltip /> inside the innermost component, and if you are referencing <ReactTooltip /> in the other layer, then it doesn't know which id it should reference.
As demonstrated in this live codesandbox example
As soon as you are 3 components deep, I don't know I should reference the component and in which layer it should be.
-> HOC for handling state + subcomponents
-> Modal Component
-> Subcomponent with tooltip
Here's also the documentation for
