tooltip positioning

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <style>
      body, html{
        width: 100%;
        height: 100%;
        margin: 0;
        background-color: green;
      }
      body{
        width: 700px;
        margin: auto;
        background-color: blue;
      }
      .tooltip {
          position: absolute;
          width: 120px;
           height: 50px;
          padding: 5px;
          text-align:center;
          font-size: 12px;
          opacity: 0;
          background-color: papayawhip;
          -webkit-border-radius: 10px;
          -moz-border-radius: 10px;
          border-radius: 10px;
          -webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
          -moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
          box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
          pointer-events: none;
      }
      .region1{
        width: 200px;
        height: 200px;
        background-color: purple;
        font-size: 50px;
      }
      .region2{
        width: 200px;
        height: 200px;
        background-color: orange;
        font-size: 50px;
        position: absolute;
      }

</style>
  </head>
  <body>
    <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <script>

var body = d3.select('body')
var region1 = body.append('div').attr('class', 'region1')
  .text('region 1')
var region2 = body.append('div').attr('class', 'region2')
  .text('region 2')

var tooltip1 = region1.append('div')
        .attr("class", "tooltip")
        .style("opacity", 0)

var tooltip2 = region2.append('div')
        .attr("class", "tooltip")
        .style("opacity", 0)

region1.on('mousemove', function(){ tooltip1.call(update_tooltip) })
region2.on('mousemove', function(){ tooltip2.call(update_tooltip) })

function update_tooltip(tooltip) {
  var d = { name: 'victor', id: 'wow' }
   tooltip
       .transition()
       .duration(100)
       .style("opacity", .9);
    
  tooltip
      .text(d.name  + ": " + d.id )
      .style("top", (d3.event.pageY-10)+"px")
      .style("left",(d3.event.pageX+10)+"px");
}
    </script>
  </body>
</html>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js