Simplify Tooltip

[jameslaneconkling]

It might be possible to simplify how Tooltip is implemented to look like so:

<Tooltip 
  display={displayTooltip}
  body={tooltipBody}
>
  <Chart
    ...
  />
</Tooltip>

And have it intercept mouseMove events and use d3.mouse() to detect the mouse's position in a containing element wrapping the Chart.

Might look like:

//something like
mouseMoveEvent(e) {
  this.setState({ x: e.x, y: e.y });
  this.onMouseMove(e);
}

render() {
const { x, y } = this.state;

if (this.props.display) {
return (
  <div
    onMouseMove={this.mouseMoveEvent}
  >
    <div
      style={{ position: 'absolute', x: x, y: y}}
    <
      {this.props.body}
    </div>

    {this.props.children}

  </div>
);
}

return <noscript />
}

This assumes passing a component as a prop isn't a bad idea.

Also, a HOC might work.