Custom tooltip

TnT Tooltip example created using the generic tooltip interface.

<!DOCTYPE html>

var table = container
                .append("table")
                .attr("class", "tnt_zmenu")
                .attr("border", "solid")
                .style("width", custom_tooltip.width() + "px");

if (data.header) {
                table
                    .append("tr")
                    .attr("class", "tnt_zmenu_header")
                    .append("th")
                    .text(data.header);
            }

if (data.body) {
                table
                    .append("tr")
                    .attr("class", "tnt_zmenu_row")
                    .append("td")
                    .style("text-align", "center")
                    .html(data.body);
            }
        });

d3.select("#container")
        .append("svg")
        .attr("width", 300)
        .attr("height", 300)
        .append("circle")
        .datum({
            header:"this is the header",
            body:"this is the body"
        })
        .attr("cx", 150)
        .attr("cy", 150)
        .attr("r", 50)
        .attr("fill", "red")
        .on("click", function (d) {
            custom_tooltip.call(this, d);
        });
    </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