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