title: D3.js cant display a tooltip
body: <p>I'm trying to add a tooltip each time when hovering circles in my line chart.
  As you can see in the picture below tooltip is exist in dom but I can't display it. Here I recreated my problem in sandbox:</p>
  <p><a href="https://codesandbox.io/s/serene-browser-t38ud6?file=/src/App.js" rel="nofollow noreferrer">https://codesandbox.io/s/serene-browser-t38ud6?file=/src/App.js</a></p>
  <p><a href="https://i.stack.imgur.com/3lFLx.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3lFLx.png" alt="enter image description here" /></a></p>
  <pre><code>const tooltip = d3
    .select(d3Chart.current)
    .append(&quot;div&quot;)
    .attr(&quot;class&quot;, &quot;tooltip&quot;)
    .style(&quot;opacity&quot;, &quot;0&quot;)
    .style(&quot;background-color&quot;, &quot;red&quot;)
    .html(`&lt;p&gt;test&lt;/p&gt;`);
  
  const mouseover = function (d) {
    console.log(&quot;tooltip&quot;);
    tooltip.transition().duration(200).style(&quot;opacity&quot;, 0.9);
  };
  
  svg
    .append('g')
    .selectAll('dot')
    .data(data)
    .enter()
    .append('circle')
    .attr('cx', function (d) {
      return x(d.date);
    })
    .attr('cy', function (d) {
      return y(d.balance);
    })
    .attr('r', 5)
    .attr('fill', '#69b3a2')
    .on('mouseover', mouseover);
  </code></pre>