ReactTooltip
Incorrect position when using z-index unless you also specify position: fixed
I ran into an interesting issue that I thought I'd mention to see if maybe it could be fixed at some point, though there is an easy workaround.
A brief background: I work on a fairly large project that is being converted from Angular to React. We use UI Bootstrap tooltips, and react-tooltip looks very similar, so is a perfect solution for us.
The tooltips were working great until I used one in a "modal" (just a fixed position element with high z-index). The position was correct, but the tooltip was underneath the modal. Ok, no problem, I'll just give it a z-index (I did this globally). All tooltips were appearing in the wrong place, sometimes hundreds of pixels off from where they should be, and it would change depending on how much the page was scrolled. In the class that was I applying, the only attribute I had was z-index.
I did some searching to see if anyone had a similar problem, but didn't see this particular problem. I figured the tooltips must already have fixed position, but after some messing around I added "position: fixed" to my class anyway and now all the tooltips work perfectly!
This was all with react-tooltip 3.6.1 on Chrome 67.
I'm having a similar issue, but haven't adjusted the z-index and position is set to fixed already. I'm not sure exactly is causing the bug on my end though...
Seems like it could be related to #355 and #308 though
Since the Tooltip is positioned within the parent html and not in a React Portal - you can expect such results when you use the Tooltip within a css Stacking context. I suggest to either extract the Tooltip into a React Portal or position it outside the stacking context.
