HTML/CSS tooltip in D3 by arnicas

index.html

<!DOCTYPE html>

<!-- Updated code from Christophe Viau for a d3 tooltip in the old days:
  https://gist.github.com/biovisualize/1016860 -->
<html >
  <head>
     <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
  </head>

<body>

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

<script type="text/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")
      .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>