HTML/CSS tooltip in D3

<!DOCTYPE html>

<html >
  <head>
     <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
  </head>

<body>

var sampleSVG = d3.select(".example_div")
      .append("svg")
      .attr("class", "sample")
      .attr("width", 300)
      .attr("height", 300);

d3.select(".example_div svg")
      .append("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");});

</script>
</body>
</html>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js