0

This issue is only for EDGE browser

So far, for our dc.js chart - we have tried 9 different approaches for showing title attribute value in new line

Now, when I try to implement them with my chart:

.renderTitle(true)
.title(function (p) {
    return [
          'ABC',
          'DEF',
          'GHI',
          'JKL']
          .join('\n');
})

Where \n is replaced with

  • \x0A
  • 
  • \t
  • 
  • 


They seems to work for HTML.

I was doubtful that they're working only with HTML, so I tried SVG only fix as suggested by @joews

.renderTitle(true)
.title(function (p) {

    return [
          '<tspan>ABC',
          '</tspan><tspan>DEF',
          '</tspan><tspan>GHI',
          '</tspan><tspan>JKL'</tspan>']
          .join('');
})

And the style rule is also applied:

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

Have also tried pure d3.js approach

.append("svg:title")
.append("tspan")
.text('ABC'+'\nDEF'+'\nGHI'+'\nJKL')

None of these are working to bring new line in tooltips.

What is the fix?

Community
  • 1
  • 1
Zameer Ansari
  • 28,977
  • 24
  • 140
  • 219
  • 1
    As I understand it, the question is purely about the behavior of `title` tags on Microsoft Edge. I've edited the tags to suit. – Gordon Sep 26 '16 at 13:32
  • Googling for "svg title element newline" brings up quite a few old questions - looks like browser behavior has been inconsistent for a long time. Maybe use d3-tip instead? – Gordon Sep 26 '16 at 13:39
  • @Gordon I've tried the top 3 solutions: [1](http://stackoverflow.com/a/3578406/2404470), [2](http://stackoverflow.com/a/29781899/2404470) & [3](http://stackoverflow.com/a/358903/2404470). None of them have worked for us. Also d3-tip is not an option for now atleast – Zameer Ansari Sep 26 '16 at 13:43
  • 1
    Right, it looks like there is no consistent support for what you're trying to do. IMO if you have formatting needs it's always better to use d3-tip. – Gordon Sep 26 '16 at 13:45

1 Answers1

0

Tries to put the tag 'br' where you want to break.

<p title="Tool&#13;Tip&#13;On&#13;New&#13;Line">Tooltip with <br /> works Firefox browsers</p>

https://jsfiddle.net/aneukirchen/mrya78a8/17/

Sr Julien
  • 494
  • 1
  • 8
  • 27