JSFiddle - React, Tailwind, and code Playground

by Sergey Kalashnikov

HTML

<body>
<svg>
	<path...

CSS

body{
		margin-left: -700px;
		margin-top: -210px;
	}

JavaScript

var tooltip = d3.select("body")
    .append("div")
    .style("position", "absolute")
    .style("z-index", "10")
    .style("visibility", "hidden")
    .text("a simple tooltip");

//var city = [2, 5];
var city = [740, 250];
body = d3.select('body')
svg = body.select('svg')
circle = svg.selectAll('circle')
    .data(city)
    .enter()
circle.enter()
    .append('circle')
    .attr('r',10)
.attr('cx', function(c) { return c[0] }
     )
.attr('cy', function(c) { return c[1] }
     )
    .attr('fill',function(d){return 'firebricks')
    // обрабатываем наведение курсора на добавленный circle
    .on("mouseover", function(){return tooltip.style("visibility", "visible");})
.on("mousemove", function(){return tooltip.style("top",
    (d3.event.pageY-10)+"px").style("left",(d3.event.pageX+10)+"px");})
.on("mouseout", function(){return tooltip.sоtyle("visibility", "hidden");});