JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://rawgit.com/Caged/d3-tip/master/index.js"></script>
<link rel="stylesheet" href="//rawgithub.com/Caged/d3-tip/master/examples/example-styles.css">
<div id="plot1"></div>
<div id="plot2"></div>

CSS

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

JavaScript

function plotFunc1(data, locator) {

	var svg = d3.select(locator)
              .append("svg")
              .attr("width", 300)
              .attr("height", 200);
 
  // add tip
	function tipRenderer(d) {
  	return "Renderer of plot 1: " + d;
  }
  tip = d3.tip()
          .attr("class", "d3-tip")
          .direction("s")
          .html(tipRenderer);
  svg.call(tip);
 
  svg.selectAll("rect")
    .data(data)
    .enter()
    .append("rect")
    .attr("fill", "#B91A24")
    .attr("width", 20)
    .attr("height", 20)
    .attr("x", (d) => d)
    .attr("y", 0)
    .on('mouseover', (d) => tip.show(d)) // <= issue here
    .on('mouseout', (d) => tip.hide(d));
}

function plotFunc2(data, locator) {

	var svg = d3.select(locator)
              .append("svg")
              .attr("width", 300)
              .attr("height", 200);
 
  // add tip
	function tipRenderer(d) {
  	return "Renderer of plot 2: " + d;
  }
  tip = d3.tip()
          .attr("class", "d3-tip")
          .direction("s")
          .html(tipRenderer);
  svg.call(tip);
 
  svg.selectAll("rect")
    .data(data)
    .enter()
    .append("rect")
    .attr("fill", "#509239")
    .attr("width", 20)
    .attr("height", 20)
    .attr("x", (d) => d)
    .attr("y", 0)
    .on('mouseover', (d) => tip.show(d)) // <= issue here
    .on('mouseout', (d) => tip.show(d));
}

var data = [100, 150, 200];

plotFunc1(data, "#plot1");
plotFunc2(data, "#plot2");