D3 Examples - A simple tooltip

xxxxxxxxxx
 
<!DOCTYPE html>
<html >
  <head>
     <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/d3@2.10.3/d3.v2.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>
    