xxxxxxxxxx<html><head> <meta charset="utf-8"> <title>d3-cooltip demo</title> <script src="https://d3js.org/d3.v4.js"></script> <script src="d3-cooltip.0.1.0.min.js"></script> <style> @import url('https://fonts.googleapis.com/css?family=Saira+Extra+Condensed'); .cooltip-box { /* The box around the cooltip text */ stroke: orange; stroke-width: 2; } .cooltip-text { /* The cooltip text */ font-family: 'Saira Extra Condensed', sans-serif; font-size: 150%; } </style></head><body> <svg id="my-svg"></svg></body><script> d3.csv("data.csv", function(error, data) { // setup basic canvas var widHei = 500 var dim = widHei / 3 var svg = d3.select("#my-svg") .attr("width", widHei) .attr("height", widHei) // add a grey background svg.append("rect") .attr("width", widHei) .attr("height", widHei) .attr("fill", "lightgrey") // create some rectangles from data svg.selectAll(".rectangles") .data(data).enter().append("rect") .attr("class", "rectangles") .attr("width", dim * 1.5) .attr("height", dim * 1.5) .attr("x", function(d, i) { return (dim / 2) * 1.5 * i }) .attr("y", function(d, i) { return (dim / 2) * 1.5 * i }) .attr("fill", function(d) { return d["value"] }) // write a callback to define what the cooltip should display var cooltipText = function(d) { return "This rectangle is\ncolored " + d["value"] } // create the cooltip and configure it var cooltip = d3.cooltip() .opacity(0.7) .padding(10) .color("lightgrey") .fill("black") .roundCorners(10) .lineHeight(25) .selector(cooltipText) // call it for each rectangle svg.selectAll(".rectangles").call(cooltip) })</script></html> https://d3js.org/d3.v4.js