Material-ui: [Tooltip] When Tooltip is in TableHead, popper incorrectly appears in the upper left corner of screen

[mattadjohnson]

• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

The <Tooltip> popper should abide by the placement prop (default: bottom) when opening from within a cell in a <TableHead>

Current Behavior

The <Tooltip> popper always appears in the top left corner of the screen when opening from within a cell in a <TableHead>

Steps to Reproduce (for bugs)

1. Create a <Table> with any number of rows/columns
2. Place a <Tooltip> inside a cell in the <TableHead>
3. Hover over the <Tooltip> to open the popper
4. Notice that the popper is always in the upper left corner of the screen
5. Notice that any <Tooltip> in a cell in the <TableBody> seems to work fine

You can see all of this here: https://codesandbox.io/s/nkpmr083lm

Context

I'm trying to give my users a help icon on certain column values in the table header that they can hover over to see a tooltip describing what it means.

Your Environment

| Tech | Version |
|--------------|---------|
| Material-UI | v1.0.0-beta.12 |
| Material-UI Icons | v1.0.0-beta.10 |
| React | v15.6.2 and v16.0.0 (tried both) |
| Browser | Chrome Version 61.0.3163.100 (Official Build) (64-bit) |

[rosskevin]

Bug definitely, not sure if this upstream in popper.js or our initialization/use of it.

@fezvrasta any thoughts?

[oliviertassinari]

The issue seems to be on our side. Having a deeper look now.

[oliviertassinari]

Actually no, it's on popper.js side.

[oliviertassinari]

Still, I have found a workaround.

[FezVrasta]

Care to open an issue on the Popper.js repository to track the problem?