Popper-core: Doesn't work inside tables

[franciscolourenco]

CodePen demo

https://codepen.io/anon/pen/RVeQyL

Steps to reproduce the problem

1. Put reference element inside of a table
2. Initialize Popper.js on it

What is the expected behavior?

Popper should show up next to reference element.

What went wrong?

Popper shows up in wrong location, or if page is scrolled, sometimes it gets hidden.

[franciscolourenco]

EDIT: I've reproduced with popper only and switched the jsbin to codepen.

[FezVrasta]

Umh that's unexpected 🤔

[franciscolourenco]

@FezVrasta any clue on why this happens?

[FezVrasta]

Nope, sorry but I'm not at home these days so I'm not able to investigate.

[franciscolourenco]

Updated the codepen to make it more clear

[mponizil]

I'm seeing the issue as popper.offsetParent returning a grandparent with position: relative, instead of the <td> container element, and am able to work around it by setting position: relative on the <td> directly.

[franciscolourenco]

@mponizil that only works partially, because the popper width will be calculated based on the width of the td, and so will be constrained if you have a lot of text and want the popper width to adjust automatically.

[mponizil]

@aristidesfl hah, indeed I realized that just after posting!

[franciscolourenco]

Best workaround I've found so far:

new Tooltip({
      container: document.body,  
      boundariesElement: document.body
})

[FezVrasta]

The problem is this:

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetParent

I guess I'll have to create a custom offsetParent implementation to get rid of this quirkiness..

[FezVrasta]

You all guys, please review #363 and let me know if it fixes your problems.

[FezVrasta]

released as 1.11.0

[razzmatazz]

Not sure if it is a big thing to fix, but the fix in #276 doesn't work for <th> elements.

[rufusroflpunch]

I can verify also that this doesn't work in <th> elements. I worked around it by changing my <th> elements to <td> elements, but that does hurt my brain a bit.

[hally9k]

Agreed, this doesn't work inside <th>. Reopen!

[eliseumds]

I have an issue with tables too. Small tooltips are correctly-positioned, but once they are a bit tall, they get mispositioned. The target is inside a TD.

Small tooltip (correct)

Big tooltip (incorrect)

Outside of the table (correct)

[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

[florianlacreuse]

We still have an issue with popover inside table wrapped in a Bootstrap table-responsive container.

• Example KO - table with table-responsive: https://codepen.io/anon/pen/xabVxp or https://codepen.io/anon/pen/oPgLOz
  As you can see, the position of the popover is quite odd / unusual and in some cases the popover isn't fully visible.

  • Example OK - table without table-responsive: https://codepen.io/anon/pen/zJxBBe
    Here everything work fine and the popover is fully visible.

I think it may be related to this issue.

[florianlacreuse]

Update: my issue seems more related to issue #611.

[FezVrasta]

These issues should be fixed in v2, I don't have any codepen to test it (since the recent examples rely on Bootstrap), but similar table-related issues are fixed so I'm pretty confident.