Tooltip IDs

Example of TnT Tooltip showing how different IDs affect the displayed tooltips. Red circles display tooltips with the same ID which is different from the ID of the blue circles. For this reason only one tooltip of each type (red / blue) can be displayed at the same time.

<!DOCTYPE html>

var container = d3.select("#container");
  var svg = container
      .append("svg")
      .attr("width", 300)
      .attr("height", 300);

svg
      .append("circle")
      .datum({type:"red"})
      .attr("cx", 150)
      .attr("cy", 150)
      .attr("r", 50)
      .attr("fill", "red")
      .on("click", myTooltip);

svg
      .append("circle")
      .datum({type:"blue"})
      .attr("cx", 10)
      .attr("cy", 10)
      .attr("r", 10)
      .attr("fill", "blue")
      .on("click", myTooltip);

svg
      .append("circle")
      .datum({type:"blue"})
      .attr("cx", 220)
      .attr("cy", 240)
      .attr("r", 30)
      .attr("fill", "blue")
      .on("click", myTooltip);

svg
      .append("circle")
      .datum({type:"red"})
      .attr("cx", 80)
      .attr("cy", 200)
      .attr("r", 15)
      .attr("fill", "red")
      .on("click", myTooltip);

</script>
</body>

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

Modified http://tntvis.github.io/tnt.tooltip/build/tnt.tooltip.min.js to a secure url

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

https://tntvis.github.io/tnt.tooltip/build/tnt.tooltip.min.js