title: React + d3 Tooltip Overlap With Legend
body: <p>I have created a stacked and grouped bar chart with React + d3. The first time it loads you can click on any legend and it will toggle the graph. However, once you hover over and the graph and the tooltip is displayed, then the tooltip overlaps with the legend and you cannot click on legend to toggle anymore. The attached image shows how it overlaps.</p>
  <p><a href="https://i.stack.imgur.com/oZl64.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/oZl64.png" alt="image link" /></a></p>
  <p>The full code demo is <a href="https://codesandbox.io/s/naughty-fog-8srz7?file=/src/StackedBarGraph.js" rel="nofollow noreferrer">demo</a>
  Please can anyone help?</p>