CODEWITHSUNDEEP
javascripthtml
Shai UI
Shai UI

Reputation: 51928

Multiline tooltip doesn't work programmatically


 is supposed to separate lines on tooltip hover.

This doesn't work:

var doesntwork = document.getElementById("doesntwork")
doesntwork.title = "line1
asdfa";

But doing it in the html works:

<div title="line1&#13;asdfas" id='works'>
</div>

See an example of this here, just hover on the squares:

https://jsfiddle.net/foreyez/3yg535jq/

Is there something I'm missing?

Upvotes: 4

Views: 56

Answers (3)

Joseph Marikle
Joseph Marikle

Reputation: 78530

I found this little solution I came up with humorous if nothing else.

https://jsfiddle.net/1fp7frer/

var doesntwork = document.getElementById("doesntwork")
doesntwork.title = "line1&#13;asdfas".replace(/&#(\d+);/g, String.fromCharCode);
#works {
  width:100px;
  height:100px;
  background:blue;
}

#doesntwork {
  width:100px;
  height:100px;
  background:red;
}
<div title="line1&#13;asdfas" id='works'></div>
<br/>
<div id='doesntwork'></div>

Upvotes: 0

Adam Buchanan Smith
Adam Buchanan Smith

Reputation: 9449

Try doing it like this: doesntwork.title = "line1\r\nasdfa";

/r for carriage return. /n for newline

See fiddle: https://jsfiddle.net/DIRTY_SMITH/3yg535jq/4/

Upvotes: 1

QBM5
QBM5

Reputation: 2788

I run into this issue all the time. For some reason xml special chars work fine when entered into the xml but not when they are added via javascript. It is very annoying

I am not sure if it is a solution you can use, but instead of using you could use \n

doesntwork.title = "line1\nasdfa";

Upvotes: 1

Related Questions