Bagelfp Bagelfp - 2 years ago 260
React JSX Question

React material-ui@next Tooltip in TableHead Cell does not render next to element

Using React v15.6.2 (and also v16) and

), whenever I use the
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
. 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
. The
<HelpIcon />
in my example below displays fine next to the text of the

Here's an example of what I'm working with:

<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 works as intended in any cell in the body

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

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