Hi! I’m making the bar chart from the d3 data visualization projects, and i have a question: i’m asked to put a tooltip on the graph, but this tooltip should have an id of tooltip, the way i’m making the bar chart adds the tooltip inside the bar so every bar has a title element with id ‘tooltip’.
My question is: is that ok?
Because, I had understand that you cannot put more than one element with the same id, and if that is the case why i’m asked to do this?, it was an error? instead of putting it like a div should i put it like a class?
I’ll appreciate your feedback! Thank you, Here’s what i’ve done so far…
It’s not exactly clear from the project specs, but the tooltips in the D3 projects refer to a
div tooltip and not the
title tooltips like were used in the lessons. You will need to add
code similar to
const tooltip = d3.select('body')
and then add the necessary data attributes and style it how you like. Basically, you want to draw a
div that you can position absolutely, above your svg, and controlled by the data object at which the mouse pointer is pointing. In my projects, I created a dummy tooltip with no data and no visibility at the beginning and then I added code to edit the tooltip while drawing the bars, dots, etc (i.e. add the
data-date attribute and make it visible). The mouse events are usually used to change the tooltips attributes and position (mouseenter, mouseover, mouseleave, mouseout, and mousemove events added with
d3.on()). There is lot of detail to get right with tooltips, but the good news is that all the D3 projects will have essentially the same tooltip code and you’ll be able to reuse it.
You are correct that ids should be unique.
Thank you very much! You you cleared my doubts! Thank you!