Tooltip position in responsive tables doesn't work

[eugen0188]

Hi,

position is wrong, if the tooltip is used inside 'table-responsive' and the content (of the tooltip) is too big.

https://jsfiddle.net/bLbrkh4a/1/

the problem:
'overflow-x: auto' of the 'table-responsive' class, so overflow-y is hidden.

Any ideas?

[Johann-S]

Related to this Popper.js issue: floating-ui/floating-ui#276

[eugen0188]

Its not only the tooltip. I have also select2 field (editable in the table).
Same problem with the overflow-y. The search field will not be completely shown,
beacause the overflow-y is hidden.

I think there are a lot of elements with the same issue.
So its not only the problem of the popper.js.
'table-responsive' makes this issues.

[Johann-S]

I don't understand why it's our issue, here, the bad positionning of your tooltip it's a Popper.js issue, and if you have an issue with select2 that's not our responsability too,
unless you show us a CodePen without any JavaScript plugin with the issue you have I won't reopen this issue

[eugen0188]

Ok, i agree to you. It's the problem of the popper / select2.

[simbunch]

Workaround that works for now:

<div class="table-responsive" style="margin:-200px 0;">
    <table class="table" style="padding:-200px 0;">
        <!-- popovers and tooltips inside will now work -->
    </table>
</div>

Works if container is outside of .table-responsive