D3 hover problem

I can’t figure out why my tooltip isn’t working on the first challenge of the data visualisation course (bar chart challenge).

I’ve created a tooltip d3 object

const tooltip = d3
  .select('.visualisation')
  .append('div')
  .attr('id', 'tooltip')

and added it to each rect

svg
    .selectAll('rect')
    .data(scaledData)
    .enter()
    .append('rect')
      .attr('data-date', (d, i) => data.data[i][0])
      .attr('data-gdp', (d, i) => data.data[i][1])
      .attr('class', 'bar')
      .attr('x', (d, i) => xScale(xDates[i]))
      .attr('y', d => h - d - p)
      .attr('width', w / (data.data.length))
      .attr('height', d => d)
      .style('fill', '#181818')
    .on("mouseover", (event, d) => {
      const [x, y] = d3.pointer(event) 
      tooltip
        .text(d[0])
        .style("left", x + "px")
        .style("top", y - 28 + "px")
        .style("opacity", 1)
      })
    .on("mouseout", () => {
      tooltip
        .style("opacity", 0)
    })

and have styled it:

#tooltip {
  background-color: white;
  border: solid;
  border-radius: 5px;
  border-width: 2px;
  opacity: 0;
  padding: 5px;
}

but nothings appearing, and oddly this isnt working either:

.bar:hover {
  fill: #340000;
}

any ideas whats wrong?

Fixed : https://codepen.io/bgraham89/pen/vYdPJvL

The problem was that the second parameter on the .on methods of the d3 objects are using arrow notation, but changing that fixed it : .on("mouseover", function (event, d) { const i = this.getAttribute('index') const [x, y] = d3.pointer(event) tooltip .text(data.data[i][0]) .style("left", x + "px") .style("top", y - 28 + "px") .style("opacity", 1) .attr('data-date', data.data[i][0]) }) .on("mouseout", function () { tooltip .style("opacity", 0) })