D3 Examples - inject custom html in tooltip

xxxxxxxxxx
 
<!DOCTYPE html>
​
<head>
    <script src="https://d3js.org/d3.v3.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>
</head>
​
<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>
​
    