<br/> doesn't work to add second line in Tooltip

Question

Currently I'm working on a collapsible tree using D3.js. I successfully added a Tooltip so once I hover over an image information to said image will be added. The trouble is that unfortunately cannot use <br/> to add in a second line between both data points. Using quotation marks will simply print out the command and not using them will break the whole graph.

That's how it currently looks:

like with the command in place...

How can I add the second line of text?

function mouseover(d) {
d3.select(this).append("text")
    .attr("class", "hover")
    .attr('transform', function(d){
        return 'translate(28, 0)';
    })
    .text(d.data.name + "<br/>" + d.data.hero);
 }

function mouseout(d) {
   d3.select(this).select("text.hover").remove();
 }

Answer 1

I think you need to append the lines separately: http://plnkr.co/edit/nSANKfzNFtzyIthgVBWZ?p=preview

// Creates hover over effect
  function mouseover(d) {
    d3.select(this).append("text")
        .attr("class", "hover")
        .attr('transform', function(d){
            return 'translate(28, 0)';
        })
        .text(d.data.name);

  d3.select(this).append("text")
        .attr("class", "hover2")
        .attr('transform', function(d){
            return 'translate(28, 10)';
        })
        .text(d.data.hero);
  }

  function mouseout(d) {
    d3.select(this).select("text.hover").remove();
    d3.select(this).select("text.hover2").remove();
  }