How to make a tooltip for a chart in d3.js?

1
2
3
4

<div id="tooltip" class="hidden">
  <p><strong>Date:</strong> <span id="date"></span></p>
  <p><strong>Value:</strong> <span id="value"></span></p>
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

#tooltip {
  position: absolute;
  background: white;
  border: 1px solid #ccc;
  padding: 5px;
  border-radius: 5px;
  pointer-events: none;
}

.hidden {
  display: none;
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

// Select the chart container
var svg = d3.select("#chart");

// Add a mouseover event listener to show the tooltip
svg.selectAll(".bar")
  .on("mouseover", function(d) {
    d3.select("#tooltip")
      .style("left", d3.event.pageX + "px")
      .style("top", d3.event.pageY + "px")
      .select("#date")
      .text(d.date);
      
    d3.select("#tooltip")
      .select("#value")
      .text(d.value);
      
    d3.select("#tooltip").classed("hidden", false);
  })
  .on("mouseout", function() {
    d3.select("#tooltip").classed("hidden", true);
  });