D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
biovisualize
Full window
Github gist
Tooltip as a d3 helper
<!DOCTYPE html> <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