D3 bar chart can't pass first OR second tooltip test

JavaScript
1

Hi,

Whenever I change something insignificant in the code, the tests are green. If I test it again, the first tooltip test doesn’t pass. With the same code!

Sometimes I’m not passing the first tooltip test, sometimes I’m not passing the second one and sometimes it’s green. This must be about speed. Something with the date because those tests take up a lot of time

EM first tooltip is as follows :

Tooltip should be hidden when mouse is not on an area: expected false to be true

EM second tooltip is:

Tooltip’s “data-date” property should be equal to the active area’s “data-date” property: expected ‘1980-10-01’ to equal '1999-07-01

What is meant by ‘hidden’ ?
I did pass it at some point, but not all the time. It would go green once and then red again.
I’ve tried :

  • appending and removing the tooltip (to a g element that contains all the rects): works but I pass the test sometimes
    when mouse is (not) mousing over a rect
  • setting display of tooltip to inline / none : works but I don’t pass the test
  • setting x and y to empty string / data attribute : works but I’m not passing the test

I’m out of ideas. As far as I can see, my bar chart works and I do not know why I’m not passing that first tooltip test. Here’s the link : https://codepen.io/Mientje/pen/WNGvjPW?editors=0110
By the way, I was using tspan elements to place gdp info underneath date but then I couldn’t pass both tooltip tests, so I’ve deleted all the fancy bits.

Thanks and greets,
Karin

2

I think the most typical approach to adding the tool tips is to attach a “tooltip” div to the body element, and make it invisible like you have done, then, as you are adding the d3 rectangles that are the bars, use the d3 .on() and the appropriate mouse events (mousenter and mouseover to show the tooltip and populate its information and mouseout and mouseleave to hide the tooltip). I think you should be able to reuse some of your current tootip function at the bottom of your codepen.

Beware the changing versions of d3. Many tooltip examples on the web are from before d3v6 like you are using and .on() changed from version 5 to 6, so make sure you are reading the current documentation from the d3 repo on github.

Once you get these, the good news is the tooltips are essentially the same for the other D3 projects. Good luck.

1 Like
3

Hi,

Thank you, I will try out your suggestions.

Greets,
Karin

4

Hi,

It works! I’m not sure but using .on the selected rect elements, allows me to create two event listeners. I had entered an event listener inside the xmlHttpRequest and was forced to put it on the body or svg, because the rects were being dynamically generated after the all the data had been loaded.
Anyway, once I had .on(‘mouseenter’) and on.(“mouseleave”) in place it worked beautifully.

Thank you very much for all the help!

Greets,
Karin