D3 project -- why are these tests failing?

JavaScript
#1

Hello!
I’m working on the 1st Data Visualization project. I’m passing all but 3 of the 14 tests. I understand that I need to fix the x-axis to show the dates, but I don’t understand why I’m failing the 2 tooltips tests. It looks to me like the tooltips are working. I’d appreciate it if someone could show me the error of my ways.
Thanks!

Here’s a link the the CodePen:

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.14; rv:85.0) Gecko/20100101 Firefox/85.0.

Challenge: Visualize Data with a Bar Chart

Link to the challenge:

#2

The first tooltip error message says:

" I can mouse over an area and see a tooltip with a corresponding id=“tooltip” which displays more information about the area"

I’m currently mousing over your chart and I’m not seeing any tooltips pop-up.

UPDATE: OK, I see them now, there is a little bit of a delay before they pop-up. Also, there are some spots where they don’t pop-up. For example, if I keep my mouse still and get one to pop-up and then move my mouse straight up just a little the tool tip will disappear.

Is there a requirement that you must delay so long before popping up the tooltip? If not, then I’d get rid of that delay and try testing it again.

UPDATE 2: The more I test the more I find that I can have my mouse over a bar (not on a line between the bars but directly over a bar) and not have a tooltip showing.

#3

Thanks for taking a look. I do see what you are saying, but I don’t know why it’s happening! I added the tooltips using the technique taught in the fcc lesson in this section, and I did set the data-date attribute to be the same as the data-date attribute as the bar in question as well as setting the id to “tooltip”.

Looking at the code, can you (or anyone) give me a clue as to where the problem lies? (Here is the section where I append the tooltips to each of the rectangles):

svg.selectAll(“rect”)
.append(“title”)
.attr(“id”,“tooltip”)
.attr(“data-date”,(d)=>d[0])
.text((d)=>"Date: " + d[0] + " \nGDP: " + d[1]);

Thanks.

#4

As far as I can remember from working on this project, I think adding a title as a tooltip, as it’s taught in the lessons doesn’t get the test to pass.
You actually have to create an element like a <div> or a <p> or something else and then manipulate it with JS so it only shows up when you hover over a bar.

#5

Ah, thanks Danijela, I’ll try it!