D3 Appending HTML to Nodes

Question

I have looked for answer to this but none of the similar questions help me in my situation. I have a D3 tree that creates new nodes at runtime. I would like to add HTML (so I can format) to a node when I mouseover that particular node. Right now I can add HTML but its unformatted. Please help!

JSFiddle: http://jsfiddle.net/Srx7z/

JS Code:

 var width = 960,             height = 500;      var tree = d3.layout.tree()             .size([width - 20, height - 60]);      var root = {},             nodes = tree(root);      root.parent = root;     root.px = root.x;     root.py = root.y;      var diagonal = d3.svg.diagonal();      var svg = d3.select("body").append("svg")             .attr("width", width)             .attr("height", height)             .append("g")             .attr("transform", "translate(-30,40)");      var node = svg.selectAll(".node"),             link = svg.selectAll(".link");      var duration = 750;      $("#submit_button").click(function() {         update();     });     function update() {         if (nodes.length >= 500) return clearInterval(timer);          // Add a new node to a random parent.         var n = {id: nodes.length},                 p = nodes[Math.random() * nodes.length | 0];         if (p.children) p.children.push(n); else p.children = [n];         nodes.push(n);          // Recompute the layout and data join.         node = node.data(tree.nodes(root), function (d) {             return d.id;         });         link = link.data(tree.links(nodes), function (d) {             return d.source.id + "-" + d.target.id;         });          // Add entering nodes in the parent’s old position.         var gelement = node.enter().append("g");          gelement.append("circle")                 .attr("class", "node")                 .attr("r", 20)                 .attr("cx", function (d) {                     return d.parent.px;                 })                 .attr("cy", function (d) {                     return d.parent.py;                 });          // Add entering links in the parent’s old position.         link.enter().insert("path", ".g.node")                 .attr("class", "link")                 .attr("d", function (d) {                     var o = {x: d.source.px, y: d.source.py};                     return diagonal({source: o, target: o});                 })                 .attr('pointer-events', 'none');          node.on("mouseover", function (d) {             var g = d3.select(this);             g.append("text").html('First Line <br> Second Line')             .classed('info', true)             .attr("x", function (d) {                 return (d.x+20);             })             .attr("y", function (d) {                 return (d.y);             })             .attr('pointer-events', 'none');           });          node.on("mouseout", function (d) {             d3.select(this).select('text.info').remove();         });           // Transition nodes and links to their new positions.         var t = svg.transition()                 .duration(duration);          t.selectAll(".link")                 .attr("d", diagonal);          t.selectAll(".node")                 .attr("cx", function (d) {                     return d.px = d.x;                 })                 .attr("cy", function (d) {                     return d.py = d.y;                 });     } 

Answer 1

Using Lars Kotthoff's excellent direction, I got it working so I decided to post it for others and my own reference:

http://jsfiddle.net/FV4rL/2/

with the following code appended:

node.on("mouseover", function (d) {             var g = d3.select(this); // The node             var div = d3.select("body").append("div")                     .attr('pointer-events', 'none')                     .attr("class", "tooltip")                     .style("opacity", 1)                     .html("FIRST LINE <br> SECOND LINE")                     .style("left", (d.x + 50 + "px"))                     .style("top", (d.y +"px")); });