D3 Bar Chart can't display tooltips


I’m not sure what I’m doing wrong but I just can’t get the tooltips to show for the D3 bar chart project. I can see the tooltip div in the dev tools and I can see that the value updates when I hover over it but it’s just not visible on the chart.

This is the code for the tooltips and plotting the bars. I’ve also got a pen here. If anyone can help I’d be very grateful.


//define tooltip
    const tooltip = wrapper.append('div')
        .attr('class', 'tooltip')
        .attr('id', 'tooltip')
        .style('opacity', 0);

    //plot the data
        .attr('data-date', (d) => d[0])
        .attr('data-gdp', (d) => d[1])
        .attr('x', (d) => xScale(new Date(d[0])))
        .attr('y', (d) => yScale(d[1]))
        .attr('width', barWidth)
        .attr('height', (d) => dimensions.boundedHeight - yScale(d[1]))
        .style('fill', 'steelblue')
        .attr('class', 'bar')
        .style('transform', `translate(${dimensions.margin.left}px, ${dimensions.margin.top}px)`)
        .on('mouseover', (d, i) => {
                .style('opacity', 0.9);
            tooltip.html(`${dates[i]} $${gdp[i]} billion`)
                .attr('data-date', d[0])
                .style('transform', 'translate(200px, 200px)')
                .style("left", d3.event.pageX + 20 + "px")
                .style("top", d3.event.pageY + 20 + "px")

        .on('mouseout', (d, i) => {
                .style('opacity', 0)

Somehow I’ve managed to get it to work if I append a ‘text’ element instead of a div. I still don’t understand why I can’t get a div to show but it’s passing the tests now.