JSFiddle - React, Tailwind, and code Playground

HTML

<div id="svg">
</div>

CSS

div.tooltip {   
  position: absolute;           
  text-align: center;           
  width: 60px;                  
  height: 28px;                 
  padding: 2px;             
  font: 12px sans-serif;        
  background: lightsteelblue;   
  border: 0px;      
  border-radius: 8px;           
  pointer-events: none;         
}

JavaScript

var spaceCircles = [30, 70, 110];

var svgContainer = d3.select("#svg").append("svg")
  .attr("width", 200).attr("height", 200);

var circles = svgContainer.selectAll("circle")
  .data(spaceCircles).enter().append("circle");

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

circles
  .attr("cx", function (d) { return d; })
  .attr("cy", function (d) { return d; })
  .attr("r", 20 )
  .style("fill", function(d) {
    var returnColor;
    if (d === 30) { returnColor = "green";
    } else if (d === 70) { returnColor = "purple";
    } else if (d === 110) { returnColor = "red"; }
    return returnColor;
  })
  .on("mouseover", function(d) {      
    tooltip.transition().duration(200).style("opacity", .9);      
    tooltip.html(d)  
      .style("left", (d3.event.pageX) + "px")     
      .style("top", (d3.event.pageY - 28) + "px");    
  })                  
  .on("mouseout", function(d) {       
    tooltip.transition().duration(500).style("opacity", 0);   
  });