jQuery tooltip add line break

Question

So, I want to take the content of a div in which I have several <br/>, and then pass it as a title attribute using jQuery tooltip widget. I want the lines to appear one beneath the other inside the tooltip. thx. the code so far is:

CSS

.Lines {     width: 125px;     height:20px;     overflow:auto; } 

JavaScript

$(function () {     $(document).tooltip();      $(".Lines").hover(function () {         IaTxt = $(this).html()          $(this).prop('title', IaTxt)      }) }); 

HTML

<div class="Lines">     First line.     <br/>Second line.     <br/>Third line!     <br/>Fourth line? </div> 

Answer 1

There's a pure CSS solution. Use \n for newlines, and add this CSS style:

.ui-tooltip {     white-space: pre-line; } 

You can also use pre or pre-wrap instead of pre-line, if you want to preserve whitespace. See https://developer.mozilla.org/en-US/docs/Web/CSS/white-space