JSFiddle - React, Tailwind, and code Playground

HTML

<html>

<html>
<body>
	<script src="https://d3js.org/d3.v6.min.js"></script>
	<script src="https://cdn.jsdelivr.net/gh/bumbeishvili/d3-tip-for-v6@4/d3-tip.min.js"></script>

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/bumbeishvili/d3-tip-for-v6@4/d3-tip.min.css">
  <svg width=800 height=500  style="margin:100px"></svg>
	<script>

   const width = 400,height=100; 

  const data = [
      {"letter":"A","frequency":0.08167},
      {"letter":"B","frequency":0.01492},
      {"letter":"C","frequency":0.02782},
      {"letter":"D","frequency":0.04253},
      {"letter":"E","frequency":0.12702}
  ]

 
const svg = d3.select("svg")
      .style('overflow','visible')
 
 const y = d3.scaleLinear().domain([0.127,0,]).range([0,height])

const rects = svg.append("g")
      .attr("fill", "steelblue")
      .selectAll("rect")
      .data(data)
      .join("rect")
      .attr("x", (d,i) => i*50)
      .attr("y", d => y(d.frequency)-50)
      .attr("height", d => y(0) - y(d.frequency))
      .attr("width", 20)
      
  // -------- TIP CODE ---------
  const tip = d3.tip().attr('class', 'd3-tip').html(function(event,d) { return JSON.stringify(d); });
  svg.call(tip);
  rects.on('mouseenter.tip',tip.show)
       .on('mouseleave.tip',tip.hide)


 
	</script>

</body>
</html>