Tooltips: Data Visualization Projects - Visualize Data with a Heat Map

JavaScript
1

Tell us what’s happening:

I have 16/ 18 tests passing, but having trouble creating tooltips that will pass tests.

Currently I have the “title” tooltips for accessibility as taught in the FCC curriculum. I’m assuming that even though the title elements have an ID of “tooltip”, the test is looking for a div?

I have tried half a dozen different ways to add another div with ID tooltip, using hovers, mouseovers, etc. and I can’t get anything to show besides the title element.

One other weird thing is that my .cell:hover {border: 1px} isn’t working, and I wonder if there is something causing neither of these to work? I can’t find any reason why my hover CSS isn’t working.

Here is an example of one of my cells with the title tooltip. When I change title to ID however nothing will show up.

<rect class="cell" data-year="1859" data-month="1" data-temp="8.05" x="674.9618320610687" y="65" width="5" height="41" style="fill: rgb(255, 255, 191);"><title id="title">Year: 1859
 Month: 2
 Temp: 8.05</title></rect>

here is the css for the hover, although my bigger concern is not being able to implement any kind of a tooltip besides the “title” element

.cell:hover {
    border: 1px solid black;
  }

Last niggle, my legend passes the tests, but it’s ugly…I can’t get the axis to line up nicely with the filled rects. Maybe a label is a better method, but in theory I should be able to do an axis for that just as easily as for the main data.

Your project link(s)

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Safari/537.36

Challenge: Data Visualization Projects - Visualize Data with a Heat Map

Link to the challenge:

2

Been a while since I did this project but two things you may want to look into:

I believe the <title> tag is only to be used in the header to specify the title of your page. I don’t believe its a visual html element.

I’m not sure border works on a <rect>. I believe being a graphical object, you’d use fill and stroke attributes to style thoughs, although border may actually work with it as well.

Also, the codepen link you provided didn’t lead to your project, but rather an expired debug view.

3

Thanks for your input!

for d3 creates accessibility text that a screenreader can read, so I used that as that's what was in the d3 curriculum.

I did manage to create a new tooltip div with ID title and position it properly.

I’ll try the fill and stroke. Here is my codepen, I’ll also update the origianl.

4

Yeah, looks like you got it working with an id=title, not a element.

Also, just glancing, I changed the on hover stroke to black and it worked. I think if you wanna change the width of the stroke you need to update stroke-width:

.cell:hover {
    stroke: black ;
  }

Looks great and good job:)

1 Like
5

thanks so much! Finally!! Took 4 years, lol.

6

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