I have a functioning bar chart, but can’t pass tests 13, 14 relating to the tooltips.
Hovering with mouse creates a box with the correct information
.text() method seems to work
.attr() methods don’t seem to work as I intend
.append(“title”)
.attr(“id”, “tooltip”)
.attr(“data-date”, (d) => d[0])
.attr(“data-gdp”, (d) => d[1])
.text((d) => d[1] + " Billion USD, " + d[0]);
Link to CodePen
Can someone explain the best way to add attributes to a “title” in this fashion in D3?
Any tips would be greatly received!
Your code is creating the <title> elements, but I don’t see any code that binds to the mouseover event that would display the tooltip.
1 Like
Thanks for the response! If you have time to elaborate I would appreciate it.
I don’t have a mouseover event explicitly coded, yet the tooltip elements appear, is mouseover built into the D3 title element somehow?
If I have a element with the id “tooltip”, is that not a tooltip ?
Hi,
A tooltip in this case should be a little popup window that appears close to your mouse pointer. It is this popup window that would have those attr you are trying to attach to the title element.
Here’s mine if you hover over the bars you’ll see the tooltip pop up.
http://scrawny-pig.surge.sh/
1 Like
Thanks for the response, and nice work on your chart.
If you look at my Codepen, a pop up box appears when mouse hovers over each bar, and the correct data appears as text in the box.
I can’t get a CSS #tooltip {} to modify the styling of the elements so I’m clearly doing something wrong there.
I have attempted to replicate and apply the FCC exercise on tooltips (reasonably successfully as far as I can tell!), but I will attempt to learn tool tips from the ground up. If anyone has any recommended D3 learning material on this, let me know!
Sorry, I can clearly see the tooltips now. I have been scrolling around too quickly.!
OK, you used a title element to display the info. Interesting! I was your code more closely.
OK, in the code the id is tooltip
.append("title")
.attr("id", "tooltip")
But in the CSS you are assigning styles using a class selector instead of an id selector.
.tooltip {
background-color: green;
font-style: italic;
}
So it is looking for an element with a class of tooltip not an id of tooltip. So it never finds it.
Since you asked here’s a tooltip example from Mike Bostock the creator of D3.js. It’s one way to do it.
Hope that helps!
1 Like
Do you have the Mike Bostock example link?
Do you think my codepen should pass the tooltips tests 1, and 2? Perhaps I should raise as a bug?
regarding the title element, I was repeating what I did to pass this challenge https://learn.freecodecamp.org/data-visualization/data-visualization-with-d3/add-a-tooltip-to-a-d3-element
“Append a title element under each rect node. Then call the text() method with a callback function so the text displays the data value.”
Ah! I forgot to paste it. Here it is: https://bl.ocks.org/mbostock/1087001
As for the bug… you could report one I suppose if the test was meant to test that tooltips are created as a title element. The elements look like they have the attributes requested. Not an expert on this myself so not sure what the test is looking for…
2 Likes
I don’t think you should be adding a title element for every rect element with all of them being id=‘tooltip’, that defeats the purpose of id and is also inefficient. Consider using a d3 tip library: https://github.com/Caged/d3-tip. You can also import it via codepen.
2 Likes
if it is still not solved then the style attribute spelling is wrong there you have written stlye
I had the same issue, Gideon. Sounds like the title element solution does not pass the tests.
If anyone is still working through this, here’s another thread on the forum with one update for a feature change from d3.v5 to d3.v6.
1 Like
Hi @pmillspaugh!
Thank you for your response!
This thread has not been active for two years so I am going to close it.
Thanks!