Using React v15.6.2 (and also v16) and material-ui@next (currently v1.0.0-beta.12), whenever I use the <Tooltip> component inside a table header, the tooltip renders off in the top left corner of the page instead of next to the element wrapped with <Tooltip>. If I cut/paste the tooltip into the table body, or anywhere else in my code, it works as intended.
EDIT: When I say 'the tooltip renders' I mean the element that displays when you hover over the wrapped element inside <Tooltip>. The <HelpIcon /> in my example below displays fine next to the text of the <TableCell>
Here's an example of what I'm working with:
<Table>
<TableHead>
<TableRow>
<TableCell>
<span>Column Name That Requires Help Tooltip</span>
// this tooltip renders off in the top left corner of the screen
<Tooltip id='help' title='Info About This Column'>
<HelpIcon />
</Tooltip>
</TableCell>
</TableRow>
</TableHead>
<TableBody>
// Tooltip works as intended in any cell in the body
</TableBody>
</Table>
The only way I was able to resolve this issue was by hacking around the CSS in a way that made my end result not look like a table anymore (i.e. removing display: table-header-group and such)
Another thought I had is that I could try to override the absolute positioning of the tooltip to force it next to the element that's spawning it, but I would like to know why only inside the <TableHead> does the library fail to compute the position in which it should render the tooltip on hover.
