I have created tooltip using react-popper which uses portals. I have added modifiers with altAxis set to true to prevent overflow (see option.js file in below sandbox). Now in below sandbox tooltip is getting flipped but tooltip arrow should also come down which is not happening in my case. Any idea what I am missing? Please check below sandbox code: https://codesandbox.io/s/focused-swanson-3b66w?file=/src/option.js:1289-1296 In below screenshot tooltip is getting flipped to top when there is overflow at bottom but in that case how to adjust tooltip arrow? In below screenshot arrow is still at the top and not bottom.

There you go - https://codesandbox.io/s/thirsty-night-ph1ci?file=/src/option.js (Updated the styles in styled component)

@gray-bird-14941 oh ok top unset wow never seen this before 😅😂 but if tooltip content is variable I mean more characters or less characters in that case what should be done?

Can you try making the arrow’s position as relative? Then you should be able to use bottom: 0 or bottom: -4px to position the arrow triangle (:after) correctly. (Not 100% sure, but worth a try)

You mean to say parent container of arrow should be relative?

I tried but it did not work this is very tricky CSS problem. I am struggling with it from last 2-3 days

This works for me. (Can’t copy paste as I’m on iPad)

Thanks a lot Aravind it works like a charm 😀