Bar Chart project, Tooltip problem

JavaScript
1

hi, I can’t pass last 2 challenges of Bar Chart project
JavaScript:

.attr("class","bar")
       .append("title")
       .text((d)=> d)
       .attr("id","tooltip")

Css:

.bar:hover{
  fill: red;
}

it works correctly but the notice says:
“Tooltip should be visible when mouse is on an area: expected true to be false”
i think cause it takes a bit to appear…
This is my Pen
how to fix it?
thanks.

2

Hey there,

I vaguely remember running in to a similar issue back when I did these projects. The issue here is that you’re using a title attribute, which uses the browser’s built-in UI to render the text you have provided.

The problem with this approach is you aren’t creating an actual HTML element for your tool tip - the tests are querying the DOM for an element where id="tooltip", and that doesn’t exist so the tests are failing.

1 Like
3

The tooltip tests will fail for all the D3 projects if you use the .append('title') like @miguelgiacobbe did, despite that being the method presented in the practice exercises. There are plenty of threads around here on the solution. The timing is not the cause here (I don’t think) but it can be in some solutions you find in the forums (don’t use a delay or transition…).

I poked around in the D3 output generated and I think the tests have several problems with using a title. First, if the id attribute is set like this, it gets set on all the title elements. Every rect generated this way gets a title with an id of ‘tooltip’ which causes problems with the DOM parsing (easily fixed by using a class). Second, it’s not obvious whether the hidden/visible properties of the title are available since the browser is implementing them and the tests rely on those properties. Finally there is the timing since I’m not sure the title will appear within the time allowed by the tests. If the visibility properties are not available, I’m not sure the tests could be reimplemented in the same spirit without them, even though all the title elements could be found and checked for the correct attributes because then the user and the tests would be relying on D3 and the browser for the tooltip implementation and not implementing it directly.

A little more looking and I found that MDN says that the title may be displayed as a tooltip, so it’s not even guaranteed. So, use the alternative solutions used in many other threads in the forums…

1 Like
4

thanks for the thorough reply!!

5

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.