inject custom html in tooltip

<!DOCTYPE html>

<body>
    <div>
        <div id="container" style="position:relative"></div>
    </div>
</div>
<script>
// Option1: Injecting any html string in the body
var t = function (node) {
    var obj = {};
    obj.header = "NAmE";  // If commented, doesn't show header
    obj.body = "<p>Hello world</p>";
    tooltip.plain()
        .width(180)
        .call (this, obj);
};

// Option2: Injecting DOM directly
var t2 = function (node) {
    var obj = {};
    obj.header = "NAmE";
    obj.body = "<div id='tooltipContent'></div>"; // Only create a container to inject the content later
    tooltip.plain()
        .width(180)
        .call (this, obj);

// At this point, the tooltip is rendered and we can use the container to inject what we want
    // Create the content and inject it in the tooltip
    // This can even happen asynchronously
    var p = document.createElement("p");
    var t = document.createTextNode("Hello world!!");
    p.appendChild(t);
    d3.select("#tooltipContent").node().appendChild(p)
}

var container = d3.select("#container");
container
    .append("svg")
    .attr("width", 300)
    .attr("height", 300)
    .append("circle")
    .attr("cx", 150)
    .attr("cy", 150)
    .attr("r", 50)
    .attr("fill", "red")
    // .on("click", t);
    .on("click", t2);
</script>
</body>

Modified http://d3js.org/d3.v3.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.v3.min.js

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