An easy-to-use reusable tooltip plugin for d3v4

<!DOCTYPE html>
<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>

.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