Workers of the world unite!

Testing adding multiple svg image with tooltips using d3-tip.

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/caged/d3-tip/index.js"></script>
  
  
  <link rel="stylesheet" href="//rawgithub.com/Caged/d3-tip/master/examples/example-styles.css">
  
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    svg { width:100%; height: 100% }
  </style>
</head>

<body>
  <script>
    // Feel free to change or delete any of the code you see!
    var svg = d3.select("body").append("svg")
 
    var data = ["Workers", "of", "the", "world", "unite!"]

tip = d3.tip().attr('class', 'd3-tip').html(function(d) { return d; });

/* Invoke the tip in the context of your visualization */
svg.call(tip);
    
    var orgOpacity = 0.1;
    svg.selectAll(".worker").data(data).enter()
      .append("svg:image")
    	.classed("worker", true)
      .attr("xlink:href", "https://www.clker.com/cliparts/5/e/b/1/12620180711782779235workerwithraisedarm.svg")
      .attr("width", 100)
      .attr("height", 100)
      .attr("x", function(d,i) { return 100 + 100 * i; })
      .attr("y",100)
    	.style("opacity", orgOpacity)
      .on('mouseover', function(d) {
      	d3.select(this)
          .transition().duration(800)
          .style("opacity","1");
      	tip.show(d);  })
  .on('mouseout', function(d) {
      	d3.select(this)
        	.transition().delay(300).duration(500)
        	.style("opacity", orgOpacity)
      	tip.hide(d);  });
    
    
  </script>
</body>

Updated missing url https://raw.githubusercontent.com/Caged/d3-tip/master/index.js to https://cdn.jsdelivr.net/gh/caged/d3-tip/index.js

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

https://raw.githubusercontent.com/Caged/d3-tip/master/index.js