D3 multi-line tooltip for SVG element

Question

I am trying to add a multi-line tooltip and have some problems, mainly with how Internet Explorer handles it. I can really make my html look right, but IE ignores line breaks in the tooltip and puts it all on one line. Here are some snippets I tried (not the exact code, my dev station is in a closed network, so please ignore the missing irrelevant information 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:" + dx + "\nLine Two Y:" + dy}); 

This seems like an almost better solution and displays HTML as

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

Firefox treats this as just two lines, but IE ignores line breaks and puts them on one line. I have tried many options. If I use the title attribute of the rect element, FF makes it just fine, IE completely ignores it and does not display a tooltip. I even went so far as to get the title element under the direct to have tspans and br like this (removing the last added title above)

 var barsTitle = bars.append("title"); barsTitle.append("tspan").text(function(d){ return "Line One X:" + dx}); barsTitle.append("br"); barsTitle.append("tspan").text(function(d){ return "Line Two Y:" + dy}); 

which does what I 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 br, even if I insert line 2 in br (between the br open and close tag) IE still ignores it. Is there a simple solution?

Answer 1

It uses 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:

• Chrome displays spaces around <tspan> elements, so you cannot <tspan> them;
• IE11 displays consecutive <tspan> elements with display:block with double line spacing (I couldn't find a CSS trick to avoid this), so the style applies to all other elements.

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

Please note that although text content elements respect the display property, the presentation of tooltips is entirely browser dependent, so this method may not work in the future.

Items

... 'desc' and 'title' are not displayed as part of the graphic. User agents, however, can , for example, display the title element as a tooltip, as the pointing device moves through certain elements.

_{(my accent)}

Source: SVG parameters, desc and title elements .

Answer 2

For IE10 - it works with HTML objects in SVG (maybe a bit overkill). It also seems to work in all other browsers (FF seems to have problems with BR tags, and IE will add an extra line using two 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 that this post is quite old, but maybe someone else needs it (I needed it for SharePoint 2013 pages, which, unfortunately, run in IE10 mode due to the compatibility meta tag).