\n newline character won't work with Javascript

Question

I need to put different information in separate lines, I have a working Javascript library, but I can't force the text output to display a newline. Here is the relevant part of the Javascript:

var information = layer.objectAdd({
      type:"tooltip", 
      clickable: true,
      Title: "My title", 
      Description: "My description1 \nMy description2"});

Here is the desired output:

My description1
My description2

And here is what I get:

My description1 My description2

Why is this, I mean is there another way to jump to a newline?

Sorry if I missled someone, I have a Javascript library for generating tooltips. I cannot change it because it's not my decision to make. I need to make it work, and I can't use any HTML tags because I will get it printed out because it's not being rendered in HTML. Like, I just tried

Description: "My description1 <br /> My description2"});

And it just printed My description1 <br /> My description2. Same old, same old.

UPDATE: I have no control over it how is it displayed, I'm just filling in the available properties such as click able, Title, Description etc. And I've tried to add HTML inside Description, but it just outputs everything as a string no matter what code you write.

Answer 1

It depends on what you're doing with the text, but my guess is you're rendering it as Html. In that case, you should be using a <br /> tag instead of a \n.

EDIT: It sounds like this doesn't solve your problem, because html tags are encoded and displayed, rather than interepreted as html tags. In that case, you'll either have to modify your tooltip display library, or go with a different library.

Answer 2

You're using some kind of library that implements tooltypes. What is it? You should read the documentation for the tooltip library.

Perhaps you can do <p>My description1</p><p>My description2</p> or maybe multipline descriptions are not implemented in the library you are using.

We don't have enough code to know. Maybe show us the list of scripts that's being included in the html.

Answer 3

If you want to have the text displayed in markup, newlines won't work, you have to specify it in HTML (via <br /> or any combinaison of <p></p> or <div></div>).

Description: "MyDescription1<br/>MyDescription2"

Or, even better, you can translate line breaks in HTML line breaks when you render the actual content:

document.write(foo.Description.replace('\n','<br/>'));

If Description text is meant to be displayed in alert() messages, \n will work. So it's better to make the decision to escape when you render, not in the content of your object.

Answer 4

What kind of tootips? If it's a JavaScript library that floats divs over the page you would need to change the library to detect the \n and insert a line break.

If it's simple title attributes, I'm afraid you can't (reliably) have a newline in them at all. Some browsers will render title="a
b" (or the JavaScript equivalent element.title= 'a\nb';) on two lines; others won't.

Answer 5

Since the tooltip strips html and you cant change that, there aren't a lot of options.

One (rather unpleasant) solution would be to set description to

"My Description1 UNIQUE_STRING_TO_REPLACE My Description2"

Then you can do a search through the DOM to find the node that contains the substring UNIQUE_STRING_TO_REPLACE and replace it with <br />

If you look at the html generated, you may be able to limit your searching to make it faster (your tooltips may all share a class or a similar id.) You'd have to check this yourself, since I don't have access to your html.

It is very hackish (and not very fast) and it would be preferable for you to have the tool-tip allow you to add new lines, but if nothing else works and you must to get this to work, this will at least accomplish your goal.

Answer 6

Can you add the style white-space: pre to your tooltip window (either inline style or in a stylesheet)?

Answer 7

The JS library is escaping your HTML chars and your content is displayed as HTML, so "\n" is transformed into a newline but shown as a simple space. so, with the avaiable tools you don't have a way to do it without modifying the library (or maybe reading some more about it).

Answer 8

You might try \r\n, or its equivalent, 

. Since this is getting rendered by the browser, that might push a proper Windows newline through to the tooltip. Completely non-platform-specific, though.

Answer 9

As a workaround, separate the lines with middle dots (·, U+00B7). Not as readable as proper line breaks, but your best option given the tooltip constraint.

Answer 10

You're using a proprietary JavaScript library that you're not allowed/able to edit. You're further not allowed/able to show us the source code of its render function or read it yourself to figure out how it escapes data. Finally, you can't/won't give us the name of this library (assuming it's publicly available) so we can research it ourselves.

You appear to have tried the only reasonable ways that somebody could assume this would work.

The only possible solution is to contact your vendor and demand an answer.

Answer 11

Can you post which tooltip library you are using?

You are not by any chance making the output from within PHP (or another scripting language that swallows lone backslashes)?