Async tooltips

TnT Tooltip example simulating a tooltip to display async data. Clicking on the red circle fires a plain tooltip with a spinner. After 2 seconds, this spinner is substituted by a table tooltip displaying the data.

<!DOCTYPE html>

<body>
    <div id="container" style="padding:30px; position:relative" ></div>
    <script>
    var t = function (data) {
        var event = d3.event;
        var elem = this;

var spinner = tnt.tooltip.plain()
            .id(data.name)
            .call(elem, {
                header: data.name,
                body: "<img src=animatedEllipse.gif width=30/>"
            });

// Simulates async
        setTimeout(function () {
            var obj = {};
            obj.header = data.name;
            obj.rows = [];
            obj.rows.push({
                "label" : "type",
                "value" : data.type
            });
            tooltip.table()
                .id(data.name)
                .width(180)
                .call (elem, obj, event);

}, 2000);
    };

var svg = d3.select("#container")
        .append("svg")
        .attr("width", 300)
        .attr("height", 300);

svg
        .append("circle")
        .datum({name:"circle1", type:"circle"})
        .attr("cx", 150)
        .attr("cy", 150)
        .attr("r", 50)
        .attr("fill", "red")
        .on("click", t);

svg
        .append("rect")
        .datum({name:"rect1", type: "rect"})
        .attr("x", 40)
        .attr("y", 10)
        .attr("width", 70)
        .attr("height", 20)
        .attr("fill", "steelblue")
        .on("click", t);
    </script>
</body>

Modified http://d3js.org/d3.v5.min.js to a secure url

Modified http://tntvis.github.io/tnt.tooltip/build/tnt.tooltip.min.js to a secure url

https://d3js.org/d3.v5.min.js

https://tntvis.github.io/tnt.tooltip/build/tnt.tooltip.min.js