JSFiddle - React, Tailwind, and code Playground

by Mark

HTML

<div class="example_div"></div>

JavaScript

var tooltip = d3.select("body")
	.append("div")
	.style("position", "absolute")
	.style("z-index", "10")
	.style("visibility", "hidden")
	.text("a simple tooltip");
	
var sampleSVG = d3.select(".example_div")
	.append("svg:svg")
	.attr("class", "sample")
	.attr("width", 300)
	.attr("height", 300);    
	
d3.select(".example_div svg")
	.append("svg:circle")
	.attr("stroke", "black")
	.attr("fill", "aliceblue")
	.attr("r", 50)
	.attr("cx", 52)
	.attr("cy", 52)
	.on("mouseover", function(){return tooltip.style("visibility", "visible");})
	.on("mousemove", function(){return tooltip.style("top", (event.pageY-10)+"px").style("left",(event.pageX+10)+"px");})
	.on("mouseout", function(){return tooltip.style("visibility", "hidden");});