title: D3 multi-line tooltip for SVG element
body: <p>I'm attempting to add a multi-line tooltip and having some issues, mostly with the way internet explorer handles them.  I can actually get my html to seemingly render correctly, but IE ignores line breaks in the tooltip and puts it all on the same line.
  Here are some snippets that I tried (not exact code, my dev station is on a closed network, so please ignore missing non-relevant info such as position, etc.)</p>
  
  <pre><code>var bars = svg.selectAll(".bar")
  .data(data)
  .enter().append("rect")
  .attr("class","bar")
  .append("title").text(function(d){ return "Line One X:" + d.x + "\nLine Two Y:" + d.y});
  </code></pre>
  
  <p>This seems almost the best solution and renders the HTML to look like</p>
  
  <pre><code>&lt;title&gt;
  Line One X: 25
  Line Two Y: 30
  &lt;/title&gt;
  </code></pre>
  
  <p>Firefox handles that just fine as two lines, but IE ignores the line break and puts them on the same line.
  I've tried many variations. If I use the title attribute of the rect element, FF renders it just fine, IE completely ignores it and won't show a tooltip.
  I even went so far as to force the title element under rect to have tspans and a br like this (removing the last append title above)</p>
  
  <pre><code>var barsTitle = bars.append("title");
  barsTitle.append("tspan").text(function(d){ return "Line One X:" + d.x});
  barsTitle.append("br");
  barsTitle.append("tspan").text(function(d){ return "Line Two Y:" + d.y});    
  </code></pre>
  
  <p>which renders what I would think is correct HTML</p>
  
  <pre><code>&lt;title&gt;
  &lt;tspan&gt;Line One X: 25&lt;/tspan&gt;
  &lt;br&gt;&lt;/br&gt;
  &lt;tspan&gt;Line Two Y: 30&lt;/tspan&gt;
  &lt;/title&gt;
  </code></pre>
  
  <p>Here again IE completely ignores the br, even if I insert line 2 into the br (between the br open and close tag) IE still ignore it.
  Is there no simple solution to this?</p>