Tooltip Not Appearing

JavaScript
1

Tell us what’s happening:
Describe your issue in detail here.

The tooltip boxes won’t appear on the screen even if I hover the cursor through the bars. I have tried appending new div as tooltip, I have tried appending new rect as tootip, none of them succeed. The “title” tooltip previously taught in the tutorials couldn’t get the test suite to pass.

I have even tried to watch FlorinPop’s video on how he solved this challenge, referenced his code, still fail. Resorted to copying the EXACT SAME WAY he made his tooltip, and it still fails to appear on my screen.

I have no idea what I did wrong, and no idea what should I change in order to get it to work. I did not find any relevant answered questions on StackOverflow, w3 school, and developer.mozilla.org that could help me (or the ones I found which I thought could help ultimately still failed).

I have grown pretty frustrating at solving this, staring at the code for hours, typing the same codes again and again that still fail, finding typos that aren’t there, making 0 progress for the entire day. I felt like I had to ask the question here.

Any kind of help and responses would be greatly appreciated. Thank you.

Your code so far

d3.select(‘svg’)
.selectAll(‘div’)
.data(json.data)
.enter()
.append(‘div’)
.style(“width”, function(d) { return xScale(d) + “px”; })
.text(function(d) { return d; })
.on(“mouseover”, function(d){tooltip.text(d); return tooltip.style(“visibility”, “visible”);})
.on(“mouseout”, function(){return tooltip.style(“visibility”, “hidden”);});

 var tooltip = svg.append('div')
     .attr('class','tooltip')
     .data(json.data)
     .style("position", "absolute")
     .style("z-index", "10")
     .attr('width', 200)
     .attr('height', 200)
     .attr('id', 'tooltip')
     .attr('data-date', (d) => d[0])
     .text("a simple tooltip")

Challenge: Visualize Data with a Bar Chart

Link to the challenge:

2

Tell us what’s happening:
Describe your issue in detail here.

I have asked this question since December 2021 and it still has not get answered, the number of views on my codepen also has not increased. The link to the question is: Tooltip Not Appearing

But in summary, I tried to make a “div” or “rect” tooltip because the “title” tooltip is insufficient to include the data to pass the test, but none of the codes I found on developer Mozilla and StackOverflow worked the way I intended it to be.

I am unable to find the issue and is stuck ever since.

Your code so far

Your browser information:

User Agent is: Chrome

Challenge: Visualize Data with a Bar Chart

Link to the challenge:

3

Unfortunately, you asked during the winter holidays and I’m sure nobody saw it. The title tooltip problem is widely known and discussed in the forums. I’m not sure how old the tutorials you are referencing are, but they likely use a D3 older than the version 7 you are using and several parts of the API have changed, so the old tutorials are not useful unless you can modify them with the API changes as you read them.

First, this tooltip code probably needs moved up:

     var tooltip = svg.append('div')
         .attr('class','tooltip')
         .data(json.data)
         .style("position", "absolute")
         .style("z-index", "10")
         .attr('width', 200)
         .attr('height', 200)
         .attr('id', 'tooltip')
         .attr('data-date', (d) => d[0])
         .text("a simple tooltip")

You are mixing the use of style and attr. Since there is no selection, you can’t use data() (you don’t need it anyway). This is appending the div to an svg and you should really append to body. You really only need a div, with the correct id, hidden, and attached to the body.

Second, this won’t work:

      d3.select('svg')
        .selectAll('div')
        .data(json.data)
        .enter()
        .append('div')
        .style("width", function(d) { return xScale(d) + "px"; })
        .text(function(d) { return d; })
         .on("mouseover", function(d){tooltip.text(d); return tooltip.style("visibility", "visible");})
      .on("mouseout", function(){return tooltip.style("visibility", "hidden");});

This is attempting to append a div to the svg for each entry in the data set, with mouseover and mouseout functions attached to these divs. You need the tooltip triggered by mousing on the bar elements. Also, D3v7 calls these mouse functions as (event, datum) => {...} so providing one argument in the signature means you are passing the event and not the datum.

Finally, since this is where the bars are being created:

      svg.selectAll('rect')
         .data(json.data)
         .enter()
         .append('rect')
         .attr('x', (d, i) => i * barWidth + padding)
         .attr('y', d => yScale(d[1]))
         .attr('width', barWidth)
         .attr('height', (d) => height - padding - yScale(d[1]))
         .attr('class', 'bar')
         .attr('data-date', (d) => d[0])
         .attr('data-gdp', (d) => d[1])

this is where you need the mouse functions to show and hide the tooltips. Just make sure to use the current mouse function signatures as mentioned above.

2 Likes
4

Thank you very much, Jeremy. I got the tooltip test suites to pass after reading your suggestion and the D3v7 documentation on GitHub. Now, all that’s left to fix are the axes…

Although optional, I failed to make the tooltip move according to mouse cursor position though. I tried something like
tooltip.setAttribute('x', (d, i) => i * barWidth + padding),
tooltip.attr('x', (d, i) => i * barWidth + padding)
tooltip.style.left = i * barWidth + padding;
and many others, but the tooltip still stays in place in the center of the page regardless of what I add or remove.

I decided to put this detail on hold first, and I’ll see what I can do once I fixed the axis-data alignment.

5

The trick to a moving tooltip is the other mouse event, mousemove. If you’ve got the appearing and hiding working, then you’ve already handled mouseenter/mouseover and mouseleave/mouseout; now just do something with mousemove. And since D3 passes the event (which has the mouse position) you can move the tooltip.

1 Like
6

I am able to make the tooltip “move” now!
Not really, more like making it appear on different locations according to which bar I hover over. Like how the fCC example has it.

This time I used
tooltip
.style('left', i * barWidth + 20 + 'px')
.style('top', height - 20 + 'px')
to make it move.

As to why it didn’t work when I used it before, I actually referenced fCC’s example page, and found out that in fCC’s D3 barchart, they specifically declared a variable
var i = this.getAttribute('index');
giving it the value of the individual data’s index, while I on the other hand used .on("mouseover", function(event, d, i){})
which did not work as I thought it would be. I am still not very familiar with the latest D3v7 mouse functions to even spot that mistake until I referenced the fCC page.

7

One thing though… I tried fixing the axis and data alignment, but for some reason, it still couldn’t get me the passes I need.

10. The data-date attribute and its corresponding bar element should align with the corresponding value on the x-axis.

11. The data-gdp attribute and its corresponding bar element should align with the corresponding value on the y-axis.

It might not be accurate, but my visual checking doesn’t tell me that there’s anywhere wrong with it. The dates are positioned correctly on the X-axis and the values of GDP correspond to accurate values on the Y-axis.

Is there anything I missed or overlooked?

8 
      svg.append('g')
         .attr("transform", 'translate('+ padding +', 0)')
         .attr('id', 'x-axis')
         .call(yAxis)
      
      svg.append('g')
         .attr("transform", "translate(0," + (height - padding) + ")")
         .attr('id', 'y-axis')
         .call(xAxis)

Compare these ids to the their respective axis functions.

1 Like
9

bruh now I feel dumb. Thanks a lot! I bet that’s the easiest question to answer in this entire forum hahaha. I got all of the test suites 14/14 pass now thanks to your help.

10

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