Tooltip Stays Hidden In D3 Treemap

$( document ).tooltip({
    position: {
        my: "center top+20",
        at: "center bottom",
        using: function( position, feedback ) {
            /* fix tooltip not hiding problem */
            if($( ".ui-tooltip" ).length>1){
                // since the new tooltip is already added, there are now 2. 
                // removing the first one fixes the problem
                $( ".ui-tooltip" )[0].remove();
            }
            $( this ).css( position );
            $( "<div>" )
            .addClass( "arrow" )
            .addClass( feedback.vertical )
            .addClass( feedback.horizontal )
            .appendTo( this );
        }
    }
});

': $' + size + '</div>'

': ' + numberFormat.formatValue(size) + '</div>';

google.charts.load('current', {
  callback: drawChart,
  packages: ['treemap']
});

function drawChart() {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'ID');
  data.addColumn('string', 'Budget');
  data.addColumn('number', 'Amount');
  data.addRows([
    ['Program', null, 0],
    ['Housing', 'Program', null],
    ['Home1', 'Housing', 2000000],
    ['Home2', 'Housing', 1500000],
    ['Business', 'Program', 2000000],
    ['Coastal Resiliency', 'Program', 5000000],
    ['Infrastructure/City Services', 'Program', 400000]
  ]);

  var numberFormat = new google.visualization.NumberFormat({
    pattern: '#,##0',
    prefix: '$'
  });
  numberFormat.format(data, 2);

  var tree = new google.visualization.TreeMap(document.getElementById('chart_div'));

  var options = {
    highlightOnMouseOver: true,
    maxDepth: 1,
    maxPostDepth: 2,
    minColor: '#FDC217',
    midColor: '#29BD75',
    maxColor: '#21809C',
    headerHeight: 35,
    headerColor: "#234E94",
    fontColor: "White",
    showScale: true,
    height: 500,
    useWeightedAverageForAggregation: true,
    generateTooltip: showFullTooltip
  };


  tree.draw(data, options);

  function showFullTooltip(row, size) {
    return '<div style="background:#FFFFFF; padding:10px; border-style:solid">' +
       '<span style="font-family:Times New Roman"><b>' + data.getValue(row, 0) +
       '</b>, ' + data.getValue(row, 1) +'</span><br>' +
       data.getColumnLabel(1) +
       ': ' + numberFormat.formatValue(size) + '</div>';

  }
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

class Treegraph extends React.Component {
  state = {
    width: 400,
    height: 400
  };
  createTreeChart = () => {
    const width = 550;
    const height = 500;
    const padding = 60;
    const format = d3.format(",d");
    const name = d =>
      d
      .ancestors()
      .reverse()
      .map(d => d.data.segment)
      .join(" / ");
    // const name = d => d.data.segment;
    function tile(node, x0, y0, x1, y1) {
      d3.treemapBinary(node, 0, 0, width, height);
      for (const child of node.children) {
        child.x0 = x0 + (child.x0 / width) * (x1 - x0);
        child.x1 = x0 + (child.x1 / width) * (x1 - x0);
        child.y0 = y0 + (child.y0 / height) * (y1 - y0);
        child.y1 = y0 + (child.y1 / height) * (y1 - y0);
      }
    }
    const treemap = data =>
      d3.treemap().tile(tile)(
        d3
        .hierarchy(data)
        .sum(d => d.value)
        .sort((a, b) => b.value - a.value)
      );
    const svg = d3
      .select("#chart")
      .append("svg")
      .attr("viewBox", [0.5, -30.5, width, height + 30])
      .style("font", "16px sans-serif");

    const x = d3.scaleLinear().rangeRound([0, width]);
    const y = d3.scaleLinear().rangeRound([0, height]);

    // const svg = d3
    //   .create("svg")
    //   .select("#chart")
    //   .append("svg")
    //   .attr("viewBox", [0.5, -30.5, width, height + 30])
    //   .style("font", "10px sans-serif");

    let group = svg.append("g").call(render, treemap(data));

    function render(group, root) {
      const node = group
        .selectAll("g")
        .data(root.children.concat(root))
        .join("g");

      node
        .filter(d => (d === root ? d.parent : d.children))
        .attr("cursor", "pointer")
        .on("click", d => (d === root ? zoomout(root) : zoomin(d)));

      //node.append("title").text(d => `${name(d)}\n(${format(d.data.count)})`);
      var tool = d3
        .select("body")
        .append("div")
        .attr("class", "toolTip");

      d3.select(self.frameElement).style("height", height + 300 + "px");
      d3.select(self.frameElement).style("width", width + 20 + "px");

      node
        .append("rect")
        .attr("id", d => (d.leafUid = "leaf"))
        .attr("fill", d =>
          d === root ? "#fff" : d.children ? "#045c79" : "#045c79"
        )
        .attr("stroke", "#fff")
        .on("mousemove", function(d) {
          tool.style("left", d3.event.pageX + 10 + "px");
          tool.style("top", d3.event.pageY - 20 + "px");
          tool.style("display", "inline-block");
          tool.html(`${d.data.segment}<br />(${format(d.data.count)})`);
        })
        .on("mouseout", function(d) {
          tool.style("display", "none");
        });

      node
        .append("clipPath")
        .attr("id", d => (d.clipUid = "clip"))
        .append("use")
        .attr("xlink:href", d => d.leafUid.href);

      node
        .append("text")
        .attr("clip-path", d => d.clipUid)
        .attr("font-weight", d => (d === root ? "bold" : null))
        .attr("font-size", d => {
          if (d === root) return "0.8em";
          const width = x(d.x1) - x(d.x0),
            height = y(d.y1) - y(d.y0);
          return Math.max(
            Math.min(
              width / 5,
              height / 2,
              Math.sqrt(width * width + height * height) / 25
            ),
            9
          );
        })
        .attr("text-anchor", d => (d === root ? null : "middle"))
        .attr("transform", d =>
          d === root ?
          null :
          `translate(${(x(d.x1) - x(d.x0)) / 2}, ${(y(d.y1) - y(d.y0)) /
                2})`
        )
        .selectAll("tspan")
        .data(d =>
          d === root ?
          name(d).split(/(?=\/)/g) :
          d.value < 2 ?
          `${d.data.segment.substring(0, 3)}...`.split(/(\s+)/) :
          d.data.segment.split(/(\s+)/).concat(format(d.data.count))
        )
        .join("tspan")
        .attr("x", 3)
        .attr(
          "y",
          (d, i, nodes) =>
          `${(i === nodes.length - 1) * 0.3 + (i - nodes.length / 2) * 0.9}em`
        )
        // .attr("fill-opacity", (d, i, nodes) =>
        //   i === nodes.length - 1 ? 0.7 : null
        // )
        // .attr("font-weight", (d, i, nodes) =>
        //   i === nodes.length - 1 ? "normal" : null
        // )
        .text(d => d);
      node
        .selectAll("text")
        .classed("text-title", d => d === root)
        .classed("text-tile", d => d !== root)
        .filter(d => d === root)
        .selectAll("tspan")
        .attr("y", "1.1em")
        .attr("x", undefined);
      group.call(position, root);
    }

    function position(group, root) {
      group
        .selectAll("g")
        .attr("transform", d =>
          d === root ? `translate(0,-30)` : `translate(${x(d.x0)},${y(d.y0)})`
        )
        .select("rect")
        .attr("width", d => (d === root ? width : x(d.x1) - x(d.x0)))
        .attr("height", d => (d === root ? 30 : y(d.y1) - y(d.y0)));
    }

    // When zooming in, draw the new nodes on top, and fade them in.
    function zoomin(d) {
      x.domain([d.x0, d.x1]);
      y.domain([d.y0, d.y1]);
      const group0 = group.attr("pointer-events", "none");
      const group1 = (group = svg.append("g").call(render, d));
      svg
        .transition()
        .duration(750)
        .call(t =>
          group0
          .transition(t)
          .remove()
          .call(position, d.parent)
        )
        .call(t =>
          group1
          .transition(t)
          .attrTween("opacity", () => d3.interpolate(0, 1))
          .call(position, d)
        );
    }

    // When zooming out, draw the old nodes on top, and fade them out.
    function zoomout(d) {
      x.domain([d.parent.x0, d.parent.x1]);
      y.domain([d.parent.y0, d.parent.y1]);
      const group0 = group.attr("pointer-events", "none");
      const group1 = (group = svg.insert("g", "*").call(render, d.parent));
      svg
        .transition()
        .duration(750)
        .call(t =>
          group0
          .transition(t)
          .remove()
          .attrTween("opacity", () => d3.interpolate(1, 0))
          .call(position, d)
        )
        .call(t => group1.transition(t).call(position, d.parent));
    }

    return svg.node();
  };
  componentDidMount() {
    this.createTreeChart();
  }
  render() {
    return ( <
      React.Fragment >
      <
      div id = "chart" / >
      <
      /React.Fragment>
    );
  }
}

.toolTip {
  position: absolute;
  display: none;
  width: auto;
  height: auto;
  background: none repeat scroll 0 0 white;
  border: 0 none;
  border-radius: 8px 8px 8px 8px;
  box-shadow: -3px 3px 15px #888888;
  color: black;
  font: 12px sans-serif;
  padding: 5px;
  text-align: center;
}