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.
xxxxxxxxxx<head> <script src="https://d3js.org/d3.v5.min.js" charset="utf-8"></script> <link rel="stylesheet" href="https://tntvis.github.io/tnt.tooltip/build/tnt.tooltip.css" type="text/css"/> <script src="https://tntvis.github.io/tnt.tooltip/build/tnt.tooltip.min.js"></script></head><body> <div id="container" style="position:relative"></div><script> var myTooltip = function (data) { var obj = {}; obj.header = "Circle"; obj.rows = []; obj.rows.push({ label : "type", value : data.type }); tooltip.table() .width(200) .id(data.type) .call (this, obj); }; 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