12

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?

jshanley
  • 9,048
  • 2
  • 37
  • 44
Joe
  • 340
  • 3
  • 9
  • You're not going to be able to get the result you want in IE. How the tooltip is rendered is completely up to the browser. Chrome happens to respect your `\n` newline characters, IE happens not to. If you want more control over the tooltip, you'll have to either create a text element with separate tspans, or create a separate html tooltip, and in either case handle the showing/hiding of the element in your script. – jshanley Jul 31 '14 at 18:41
  • Should `.append("title)` be `.append("title")`? – Casey Falk Jul 31 '14 at 18:46
  • Yes, but read the whole post... he mentions that this is not the original code. As for your (Joe's) second test of using `
    `, it seems that all markup is stripped out of the `` element in both Chrome and IE (haven't tested FF) and only the text itself is rendered. See [**this example**](http://jsbin.com/kujiz/1/edit?js,output).     – jshanley Jul 31 '14 at 18:50
  • I think you're right. I actually did the same test that you did in your examples, IE ignored the divs. I think my customer will just have to accept it until or unless MS changes the way they render title. It's DoD too, so they're stuck on IE. Thanks for the comments. – Joe Jul 31 '14 at 21:56

2 Answers2

9

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.

joews
  • 29,767
  • 10
  • 79
  • 91
  • We ended up just telling the customer that they need to live with the single line. We use the bootstrap tooltip (angular directive version) which is fine with HTML, but didn't play nicely inside our D3 directives. So stuck with title. I don't have time to test this, at the moment, but it sounds reasonable, so I'm going to mark it as the selected answer (well it's the only one too LOL) Thanks for your response. – Joe Apr 27 '15 at 14:01
1

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

frevd
  • 1,869
  • 2
  • 15
  • 11