index.html

## index.html
<!DOCTYPE html>
<html >
  <head>
     <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
  </head>
  <body>
  <div class="example_div"></div>
    <script type="text/javascript">
var tooltip = d3.select("body")
	.append("div")
        .attr("class", "tooltip")
	.style("position", "absolute")
	.style("z-index", "10")
	.style("visibility", "hidden")
        .style("background", "#3182bd")
        .style("color", "#deebf7");

tooltip = d3.select('.tooltip')
tooltip.append('img')
  .attr('src', "https://avatars1.githubusercontent.com/u/715494?s=140")
  .attr('alt', "boo")
  .attr('width', 42)
  .attr('height', 42);

tooltip.append('span')
.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");});

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