That is a follow-up question on

CodePudding user response：

The reason for this behaviour is caused by the fact that a child element's z-index is limited by the parent element's z-index. So because <Pane name="rectanglePane" style={{ zIndex: 401 }}> has a lower z-index than <Pane name="circlePane" style={{ zIndex: 402 }}>, all elements inside rectanglePane will always appear behind circlePane no matter what their z-index is.

To get your application to work the way you want it, you will have to add the ttPane element inside another element that is outside of <Pane name="rectanglePane" style={{ zIndex: 401 }}> and one that has a higher z-index than circlePane. You will then have to work through the logistics of triggering that element which is out of the scope of this question.

I have noticed that you are likely using components imported from another library. If that is the case and you can't add the tooltip outside of the rectanglePane element, you can try to dynamically control the zIndexes inside state and switching their values between rectanglePane and circlePane (which will switch the circle/border appearance order) . This will also involve adding your own logic, but it is unfortunately the only other way of achieving your desired result.