Visualize Data with a Bar Chart tooltip

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

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.

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
    .attr("width", w)
    .attr("height", h);

  const tooltip = d3
      .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 =;"fill", "red")"opacity", 0.9);
      tooltip.attr("id", "tooltip")"fill", "red")  
      tooltip.attr("data-date", d[0])
        .style("left", d3.event.pageX + "px")
        .style("top", d3.event.pageY - 28 + "px");
    .on("mouseout", function() {
        .style("fill", "blue");"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