React Recharts -> Tooltip problem with LabelList in Scatter chart

We are facing for some time problem with LabelList which is displayed over the elements of Scatter chart. If user is hovering over them, Tooltip is not displayed.

Code:

const {ScatterChart, Scatter, XAxis, YAxis, CartesianGrid, LabelList, Tooltip, Legend} = Recharts;
const data = [{x: 100, y: 200, z: 200}, {x: 120, y: 100, z: 260},
                  {x: 170, y: 300, z: 400}, {x: 140, y: 250, z: 280},
                  {x: 150, y: 400, z: 500}, {x: 110, y: 280, z: 200}]

const SimpleScatterChart = React.createClass({
    render () {
    return (
        <ScatterChart width={400} height={400} margin={{top: 20, right: 20, bottom: 20, left: 20}}>
        <XAxis type="number" dataKey={'x'} name='stature' unit='cm'/>
        <YAxis type="number" dataKey={'y'} name='weight' unit='kg'/>
        <CartesianGrid />
        <Tooltip cursor={{strokeDasharray: '3 3'}}/>
        <Legend onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave} />
        <Scatter name='A school' data={data} fill='#8884d8'>
          <LabelList dataKey="x" />
        </Scatter>
      </ScatterChart>
    );
  }
})

ReactDOM.render(
  <SimpleScatterChart />,
  document.getElementById('container')
);

Example: https://jsfiddle.net/alidingling/gvsspn0h/

Once you will remove LabelList, it is working fine:

const {ScatterChart, Scatter, XAxis, YAxis, CartesianGrid, LabelList, Tooltip, Legend} = Recharts;
const data = [{x: 100, y: 200, z: 200}, {x: 120, y: 100, z: 260},
                  {x: 170, y: 300, z: 400}, {x: 140, y: 250, z: 280},
                  {x: 150, y: 400, z: 500}, {x: 110, y: 280, z: 200}]

const SimpleScatterChart = React.createClass({
    render () {
    return (
        <ScatterChart width={400} height={400} margin={{top: 20, right: 20, bottom: 20, left: 20}}>
        <XAxis type="number" dataKey={'x'} name='stature' unit='cm'/>
        <YAxis type="number" dataKey={'y'} name='weight' unit='kg'/>
        <CartesianGrid />
        <Tooltip cursor={{strokeDasharray: '3 3'}}/>
        <Legend onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave} />
        <Scatter name='A school' data={data} fill='#8884d8'>
        </Scatter>
      </ScatterChart>
    );
  }
})

ReactDOM.render(
  <SimpleScatterChart />,
  document.getElementById('container')
);

Example: https://jsfiddle.net/gt0uy92a/2/

Problem is, we need LabelList displayed as it is in a first example, we can't change the position, but Tooltip must be working properly.

<LabelList 
  dataKey="x" 
  style={{pointerEvents: 'none'}}
/>

will work for you.you can bind onMouseEnter event to LabelList component as well.