tooltip from https://gist.githubusercontent.com/willzjc/a11626a31c65ba5d319fcf8b8870f281/raw/b21088a17bcacc8b3d79cedc24606e1abf30469a/index.html

tooltip

   /*################  TOOLTIP  #############################*/

    function getTagsFromCommaSeparatedStrings(tags) {
      return tags.split(',').map(function(v) {
        return '<li><div class="tag">' + v + '</div></li>  '
      }).join('');
    }

    function tooltipContent(item) {

      var strVar = "";

      strVar += "  <div class=\"customTooltip\">";
      strVar += "    <!--";
      strVar += "    <div class=\"tooltip-image-wrapper\"> <img width=\"300\" src=\"https:\/\/raw.githubusercontent.com\/bumbeishvili\/Assets\/master\/Projects\/D3\/Organization%20Chart\/cto.jpg\"> <\/div>";
      strVar += "-->";
      strVar += "    <div class=\"profile-image-wrapper\" style='background-image: url(" + item.imageUrl + ")'>";
      strVar += "    <\/div>";
      strVar += "    <div class=\"tooltip-hr\"><\/div>";
      strVar += "    <div class=\"tooltip-desc\">";
      strVar += "      <a class=\"name\" href='" + item.profileUrl + "' target=\"_blank\"> " + item.name + "<\/a>";
      strVar += "      <p class=\"position\">" + item.positionName + " <\/p>";
      strVar += "      <p class=\"area\">" + item.area + " <\/p>";
      strVar += "";
      strVar += "      <p class=\"office\">" + item.office + "<\/p>";
      strVar += "     <button class='" + (item.unit.type == 'business' ? " disabled " : "") + " btn btn-tooltip-department' onclick='params.funcs.departmentClick(" + JSON.stringify(item.unit) + ")'>" + item.unit.value + "</button>";
      strVar += "      <h4 class=\"tags-wrapper\">             <span class=\"title\"><i class=\"fa fa-tags\" aria-hidden=\"true\"><\/i>";
      strVar += "        ";
      strVar += "        <\/span>           <ul class=\"tags\">" + getTagsFromCommaSeparatedStrings(item.tags) + "<\/ul>         <\/h4> <\/div>";
      strVar += "    <div class=\"bottom-tooltip-hr\"><\/div>";
      strVar += "  <\/div>";
      strVar += "";

      return strVar;

    }

    function tooltipHoverHandler(d) {

      var content = tooltipContent(d);
      tooltip.html(content);

      tooltip.transition()
        .duration(200).style("opacity", "1").style('display', 'block');
      d3.select(this).attr('cursor', 'pointer').attr("stroke-width", 50);

      var y = d3.event.pageY;
      var x = d3.event.pageX;
      
      //restrict tooltip to fit in borders
      if (y < 220) {
        y += 220 - y;
        x += 130;
      }
      
      if(y>attrs.height-300){
        y-=300-(attrs.height-y);
      }

      tooltip.style('top', (y - 300) + 'px')
        .style('left', (x - 470) + 'px');
    }

    function tooltipOutHandler() {
      tooltip.transition()
        .duration(200)
        .style('opacity', '0').style('display', 'none');
      d3.select(this).attr("stroke-width", 5);

    }

    nodeGroup.on('click', tooltipHoverHandler);

    nodeGroup.on('dblclick', tooltipOutHandler);

    function equalToEventTarget() {
      return this == d3.event.target;
    }

    d3.select("body").on("click", function() {
      var outside = tooltip.filter(equalToEventTarget).empty();
      if (outside) {
        tooltip.style('opacity', '0').style('display', 'none');
      }
    });

  }


  //########################################################