D3 multi-line tooltip for SVG element

Question

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.)

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});

This seems almost the best solution and renders the HTML to look like

<title>
Line One X: 25
Line Two Y: 30
</title>

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)

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});    

which renders what I would think is correct HTML

<title>
<tspan>Line One X: 25</tspan>
<br></br>
<tspan>Line Two Y: 30</tspan>
</title>

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?

Answer 1

Here's an IE11-friendly solution:

tspan:nth-child(2n) {
  display: block;
}

<svg width="100" height="100">
    <rect fill="red" x="0" y="0" width="50" height="50">
      <title><tspan>This is line 1</tspan>
<tspan>This is line 2</tspan>
<tspan>This is line 3</tspan>
<tspan>This is line 4</tspan></title>
    </rect>
  </svg>

There are two subtleties:

1. Chrome renders whitespace around the <tspan> elements, so they should not be indented;
2. IE11 renders consecutive <tspan> elements with display:block with double line spacing (I couldn't find a CSS trick to avoid this), so the style is applied to every other element.

This version renders as four lines on Chrome 41, Safari 8, Firefox 37 (OSX Yosemite), and IE11 (Windows 7). Unfortunately it still renders as a single line in IE9-10. If you need multi-line display here I'd suggest your own <title> rendering based on mouse events.

Note that, whilst text content elements do respect the display property, the presentation of tooltips is entirely up the browser, so this technique may not work in the future.

...'desc' and 'title' elements are not rendered as part of the graphics. User agents may, however, for example, display the 'title' element as a tooltip, as the pointing device moves over particular elements.

_{(emphasis mine)}

Source: SVG spec, desc and title elements.

Answer 2

For IE10- it works with HTML objects within the SVG (a little overkill maybe). Also seems to work in all other browsers (FF seems to have issues with BR tags, and IE will insert an extra line if using 2 DIV tags, so using two foreignObjects is probably the safest bet).

<svg width="100" height="100">
    <rect fill="red" x="0" y="0" width="50" height="50">
      <title>This is line 1
This is still line 1 in IE
<foreignObject class="node"><div>This is line 2 in IE!<br/>And this is line 3</div></foreignObject>
</title>
    </rect>
  </svg>

PS: I know this post is rather old, but maybe somebody still needs that (I happened to need it for SharePoint 2013 pages which unfortunately run in IE10 mode due to a compatibility meta tag).