xxxxxxxxxx<html><head> <meta charset="utf-8"> <script type="text/javascript" src="https://d3js.org/d3.v3.min.js"></script> <script type="text/javascript" src="./tooltip.js"></script></head><body><div class="viz"></div><script type="text/javascript"> var sampleSVG = d3.select('.viz') .append('svg') .attr({width: 600, height: 100}); var data = d3.range(5).map(function(d, i){ return ~~(Math.random()*100); }) sampleSVG.selectAll('circle') .data(data) .enter().append('circle') .style({stroke: 'gray', fill: 'aliceblue'}) .attr({r: 40, cx: function(d, i){ return i*100 + 50; }, cy: 50}) .call(d3.helper.tooltip() .attr({class: function(d, i) { return d + ' ' + i + ' A'; }}) .style({color: 'blue'}) .text(function(d, i){ return 'value: '+d; }) ) .on('mouseover', function(d, i){ d3.select(this).style({fill: 'skyblue'}); }) .on('mouseout', function(d, i){ d3.select(this).style({fill: 'aliceblue'}); });</script></body></html> https://d3js.org/d3.v3.min.js