How to make tooltips show up in d3.js on 'mouseover' and be removed at 'mouseout'?

JavaScript
1

Tell us what’s happening:

I’m trying to add tooltips to my bar chart, so an appropriate tooltip with corresponding data (year and GDP amount) shows up for each bar when mouse is hovering over it and immediately gets removed after.

I tried to implement a solution to this problem in 2 different ways, but neither of them seem to be working.

  1. I tried creating a tooltip variable and attaching it to each bar in the following way:
let tooltip = d3.select('barchart').append('div').attr('id', 'tooltip');

barchart.selectAll('rect').data(dataset)
   .enter().append('rect')
   .attr('x', (d, i) => i * barWidth)
   .attr('y', d => yScale(yValue(d)))
   .attr('width', barWidth)
   .attr('height', d => innerHeight - yScale(yValue(d)))
   .attr('fill', 'steelblue')
   .attr('class', 'bar')
   .attr('data-date', d => xValue(d))
   .attr('data-gdp', d => yValue(d))
   .on('mouseover', (d, i) => {
      tooltip
        .attr('x', (d, i) => i * barWidth)
        .attr('y', d => yScale(yValue(d)) - 30)
        .attr('text', d => `${textValue(d)} \n${yValue(d)} Billion`)
   })
   .on('mouseout', d => {tooltip.style('display', 'none');});
  1. And also I tried creating a separate mouse over function this way:
let handleMouseOver = (d, i) => {
  const tooltip = barchart.append('div').attr({
    'id': 'tooltip',
    'x': (d, i) => i * barWidth,
    'y': d => yScale(yValue(d)) - 30,
    'text': d => `${textValue(d)} \n${yValue(d)} Billion`
  });
};

barchart.selectAll('rect').data(dataset)
   .enter().append('rect')
   .attr('x', (d, i) => i * barWidth)
   .attr('y', d => yScale(yValue(d)))
   .attr('width', barWidth)
   .attr('height', d => innerHeight - yScale(yValue(d)))
   .attr('fill', 'steelblue')
   .attr('class', 'bar')
   .attr('data-date', d => xValue(d))
   .attr('data-gdp', d => yValue(d))
   .on('mouseover', (d, i) => handleMouseOver(d, i))

However, none of the options work for me. Could you please provide me with some suggestions?

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.163 Safari/537.36.

Challenge: Visualize Data with a Bar Chart

Link to the challenge: