Placement is not working properly in tables

[phibersoft]

Describe the bug I'm passing "top" as prop, but its returning and showing on "bottom". I tested on codesandbox with your official demo, it looks like working good, but in my app its not working. The only difference is im using this tooltip in table header, maybe its related to this.

Reproduce Check codesandbox link: https://codesandbox.io/s/ancient-bush-exyt8r?file=/src/index.js

Screenshots

Additional Context Placement is working fine on left-right-bottom. Its only occuring on top.

[mohsinulhaq]

Could you please share a codesandbox reproducer with that table header usage?

[phibersoft]

Here it is: https://codesandbox.io/s/ancient-bush-exyt8r?file=/src/index.js

[happylolonly]

It is not enough space for top, also thinking how to fix it. Strange why it is changing to bottom if it is absolute. @mohsinulhaq maybe you can help?

[phibersoft]

Its not the solution but i solved like this:

Create an empty div before table, set width 100%

<div id='tooltip-bar' style={{ width: '100%' }} />
<table ...

And in the header cells, use createPortal and teleport your component to #tooltip-bar. In this way it works normally and looks fine.

[happylolonly]

oh... 😅

found that this issue not depend on this lib, https://github.com/floating-ui/react-popper/issues/383

[phibersoft]

Ah okay, thanks for informing 😃