Bagelfp Bagelfp - 1 year ago 189
React JSX Question

React [email protected] Tooltip in TableHead Cell does not render next to element

Using React v15.6.2 (and also v16) and

(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.

Answer Source

I opened an issue on GitHub and it was resolved in the latest release.

https://github.com/callemall/material-ui/issues/8467

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download