So I’m in the process of building a D3 barchart and I’m using a Tooltip div to hover on the bars but the tooltip div is not hovering over the bars. It just stays in one place. I’ve set the position of the tooltip div to absolute and the container to relative but the tooltip div just stays there and not following the mouseover effect. What is the problem to my code? Someone englighten me.
This is the link to my codepen: https://codepen.io/synerjay/full/MWjGbOw
Tooltips in d3 took me forever to figure out too!
So, if you print the left and top that you are trying to set for the tooltip, you will get “NaNpx”, which tells you there’s a problem… if you then try printing each of the pieces of the expression, you’ll see that “i” is not the index (like you expected) but instead an array with the date, the gdp, and the year.
I don’t actually understand why this happens, but since it does… if your x-scale is converting time into an x value, you could use this to set the left position, and likewise with the y-scale for top position.
Hope this helps!
Thank you so much for the tip!!
yes it is so weird that d is not showing the data at all. I used indexOf instead “i” to give the index and now it works! I’m still in the process of completing it and hopefully it will work in the end haha!
Thanks again!