javascript - D3 multi-line tooltip for SVG element - Stack Overflow

admin管理员组

文章数量:1341395

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 pletely 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 pletely 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?

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 pletely 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 pletely 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?

• javascript
• html
• svg
• d3.js

Share Follow edited Jul 31, 2014 at 19:49 jshanley 9,13822 gold badges3838 silver badges4545 bronze badges asked Jul 31, 2014 at 18:01 JoeJoe 33833 silver badges99 bronze badges 4

• You're not going to be able to get the result you want in IE. How the tooltip is rendered is pletely 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 Commented Jul 31, 2014 at 18:41
• Should .append("title) be .append("title")? – Casey Falk Commented Jul 31, 2014 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 <br>, it seems that all markup is stripped out of the <title> element in both Chrome and IE (haven't tested FF) and only the text itself is rendered. See this example. – jshanley Commented Jul 31, 2014 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 ments. – Joe Commented Jul 31, 2014 at 21:56

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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.

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 patibility meta tag).

本文标签： javascriptD3 multiline tooltip for SVG elementStack Overflow