Visualize Data with a Bar Chart tooltip

1

What am I doing wrong? I can’t pass test on this:

https://codepen.io/dany05/pen/VgZQXQ?editors=1011

I don’t understand how .html works, or something, because i don’t know how to make a tooltip with id="tooltip". I see that how i made it is wrong because can’t call id tooltip in css file.

2

My suggestion would to create a tooltip const like you created the svg const. You really only want one element to have the id tooltip.

const svg = d3
    .select("body")
    .append("svg")
    .attr("width", w)
    .attr("height", h);

  const tooltip = d3
      .select("body")
      .append("div")
      .attr("class", "tooltip")
      .attr("id", "tooltip")
      .style("opacity", 0);

next, in the .on(‘mouseover’) and .on(‘mouseoout’). Make adjustments to the tooltip. change the opacity, add the current info and move the event location.

.on("mouseover", function(d, i) {
      var colorChange = d3.select(this);
      colorChange.style("fill", "red")
      tooltip.style("opacity", 0.9);
      tooltip.attr("id", "tooltip")
      tooltip.style("fill", "red")  
      tooltip.attr("data-date", d[0])
      tooltip.html(d[0])
        .style("left", d3.event.pageX + "px")
        .style("top", d3.event.pageY - 28 + "px");
    })
    .on("mouseout", function() {
      d3.select(this)
        .transition()
        .duration(500)
        .style("fill", "blue");
    tooltip.style("opacity", 0);
    })
  

added css styling
--------
.tooltip {
  background-color: #f8f6ef;
  position: absolute;
  opacity: 0;
  color: #191919;
  font-size: 20px;
  padding: 5px;
  pointer-events: none;
  border: 2px solid #8f8779;
  border-radius: 3px;
}
1 Like
3