D3 Examples - Mouseover tooltip

xxxxxxxxxx
 
<!DOCTYPE html>
​
<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>
    <style>
        .tnt_tooltip {
            pointer-events : none;
        }
    </style>
</head>
​
<body>
    <div id="container" style="padding:30px; position:relative" ></div>
    <script>
    var hover_tooltip;
​
    var t = function (data) {
        var obj = {};
        obj.header = "";
        obj.body=data.name;
        hover_tooltip = tooltip.plain()
            .width(180)
            .show_closer(false)
            .call (this, obj);
    };
​
    var svg = d3.select("#container")
        .append("svg")
        .attr("width", 300)
        .attr("height", 300);
​
    svg
        .append("circle")
        .datum({name:"big and red circle"})
        .attr("cx", 150)
        .attr("cy", 150)
        .attr("r", 50)
        .attr("fill", "red")
        .on("mouseover", t)
        .on("mouseout", function () {
            hover_tooltip.close();
        })
​
    svg
        .append("circle")
        .datum({name: "small and blue circle"})
        .attr("cx", 80)
        .attr("cy", 55)
        .attr("r", 10)
        .attr("fill", "steelblue")
        .on("mouseover", t)
        .on("mouseout", function () {
            hover_tooltip.close();
        })
​
    svg
        .append("rect")
        .datum({name: "medium and green rectangle"})
        .attr("x", 210)
        .attr("y", 80)
        .attr("width", 90)
        .attr("height", 20)
        .attr("fill", "green")
        .on("mouseover", t)
        .on("mouseout", function () {
            hover_tooltip.close();
        })
    </script>
</body>
​
    