Hi,
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.
https://codepen.io/jenjen9/pen/oNjmrMp
//define tooltip
const tooltip = wrapper.append('div')
.attr('class', 'tooltip')
.attr('id', 'tooltip')
.style('opacity', 0);
//plot the data
d3.select('svg').selectAll('rect')
.data(data)
.enter()
.append('rect')
.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) => {
tooltip.transition()
.duration(200)
.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) => {
tooltip.transition()
.duration(200)
.style('opacity', 0)
});